html {
  background: #030000;
}

body.site-h-ritual {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: #f7e8c2;
  background:
    radial-gradient(circle at 50% 38%, rgba(128, 0, 0, var(--h-bg-red, .18)), transparent 32rem),
    radial-gradient(circle at 50% 88%, rgba(255, 210, 124, var(--h-bg-gold, .04)), transparent 22rem),
    #030000 !important;
  font-family: "MS Gothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", monospace;
  letter-spacing: 0;
}

body.site-h-ritual::before,
body.site-h-ritual::after {
  display: none !important;
}

.h-ritual {
  min-height: calc(100vh - 46px);
}

.h-stage {
  position: relative;
  min-height: calc(100vh - 46px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 4vw, 44px);
  isolation: isolate;
}

.h-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  opacity: var(--h-grid-opacity, .1);
  transform: scale(var(--h-grid-scale, 1));
}

.h-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.9), rgba(124,0,0,.76) 17%, transparent 44%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 2px, transparent 2px 6px);
  mix-blend-mode: screen;
}

body.h-god-jumpscare .h-stage::after {
  animation: hGodScareFlash 1.1s steps(4) both;
}

.h-noise {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: var(--h-noise-opacity, .08);
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,0,40,.08) 28px 29px, transparent 29px 54px);
  animation: hScan 1.8s steps(4) infinite;
}

.h-readout {
  position: fixed;
  right: 14px;
  top: 58px;
  z-index: 18;
  display: grid;
  gap: 5px;
  min-width: 112px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 225, 156, .28);
  color: #ffd98d;
  background: rgba(0,0,0,.72);
  box-shadow: 0 0 28px rgba(155,0,0,.28);
  text-align: right;
  font: 900 12px/1.25 "MS Gothic", monospace;
}

.h-readout b {
  color: #fff1cb;
  font-size: 11px;
}

.h-fragments {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: var(--h-frag-opacity, .12);
  filter: saturate(var(--h-frag-sat, .72)) contrast(var(--h-frag-contrast, 1.1));
  transform: scale(var(--h-frag-scale, 1.04)) rotate(var(--h-frag-rotate, 0deg));
  pointer-events: none;
}

.h-fragments img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.h-fragments::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(0,0,0,.34) 56%, #000 100%);
}

.h-eye-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.h-eye-field span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  opacity: var(--h-eye-opacity, 0);
  transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--h-eye-scale, .7));
  background:
    radial-gradient(circle at calc(50% + var(--look-x, 0px)) 50%, #020000 0 18%, #f4e2bd 19% 31%, rgba(146,19,24,.5) 32% 46%, transparent 48%),
    radial-gradient(ellipse, rgba(255,248,220,.72), rgba(63,0,0,.34) 58%, transparent 70%);
  filter: blur(var(--h-eye-blur, 2px)) drop-shadow(0 0 12px rgba(255,0,42,.35));
  animation: hEyeBlink var(--blink) steps(2) infinite;
}

.h-altar {
  position: relative;
  z-index: 5;
  width: min(620px, calc(100vw - 28px));
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  transform: translateY(var(--h-altar-y, 0));
}

.h-kicker {
  margin: 0;
  color: #ffce7a;
  font: 900 12px/1.2 "MS Gothic", monospace;
  text-shadow: 0 0 16px rgba(255,0,38,.54);
}

.h-altar h1 {
  margin: 0;
  max-width: 11em;
  color: #fff5db;
  font: 900 clamp(34px, 6.8vw, 74px)/1.05 "Yu Mincho", "Hiragino Mincho ProN", serif;
  text-shadow: 0 0 26px rgba(226,54,54,.52), 4px 4px 0 #000;
}

.h-copy {
  min-height: 4.8em;
  max-width: 560px;
  margin: 0;
  color: rgba(255, 241, 203, .76);
  font: 800 15px/1.9 "MS Gothic", monospace;
  text-shadow: 2px 2px 0 #000;
}

.h-forbidden {
  min-height: 2.2em;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 36, 64, .72);
  color: #ffeff0;
  background:
    repeating-linear-gradient(90deg, rgba(255,36,64,.2) 0 8px, transparent 8px 16px),
    rgba(34, 0, 0, .74);
  box-shadow:
    inset 0 0 18px rgba(255, 0, 38, .18),
    0 0 24px rgba(255, 0, 38, .2);
  font: 900 clamp(16px, 2.4vw, 25px)/1.25 "MS Gothic", monospace;
  text-shadow: 2px 2px 0 #000, 0 0 14px rgba(255,0,48,.76);
}

body.h-step-5 .h-forbidden,
body.h-step-6 .h-forbidden,
body.h-step-7 .h-forbidden,
body.h-step-8 .h-forbidden,
body.h-step-9 .h-forbidden {
  border-color: rgba(255, 225, 152, .78);
  color: #fff4cd;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 214, 128, .26), transparent 54%),
    rgba(72, 0, 0, .82);
  animation: hClickInvite .42s steps(2) infinite;
}

.h-main-trigger {
  position: relative;
  width: min(250px, 72vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-top: 8px;
  border: 1px solid rgba(255, 223, 150, .52);
  border-radius: 50%;
  color: #fff3cf;
  background:
    radial-gradient(circle, rgba(255,222,151,.24), rgba(120,0,0,.42) 36%, rgba(0,0,0,.92) 68%),
    conic-gradient(from 0deg, rgba(255,230,160,.2), rgba(128,0,0,.5), rgba(255,230,160,.2));
  box-shadow:
    inset 0 0 36px rgba(255,220,150,.2),
    0 0 var(--h-glow, 34px) rgba(197,0,26,.42);
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
  animation: hPulse var(--h-pulse-duration, 2.4s) ease-in-out infinite;
}

.h-main-trigger::before,
.h-main-trigger::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(255, 224, 157, .34);
  border-radius: 50%;
  transform: rotate(15deg);
}

.h-main-trigger::after {
  inset: 31%;
  background:
    radial-gradient(circle at 50% 50%, #050000 0 18%, #fff3cf 19% 28%, rgba(167,0,27,.72) 29% 48%, transparent 50%);
  box-shadow: 0 0 26px rgba(255,0,34,.5);
}

.h-main-trigger:hover,
.h-main-trigger:focus-visible {
  transform: scale(1.035);
  filter: brightness(1.14) contrast(1.18);
}

.h-main-trigger span {
  position: relative;
  z-index: 1;
  max-width: 12em;
  padding: 4px 12px;
  color: #fff7d8;
  background: rgba(0,0,0,.54);
  font: 900 16px/1.45 "MS Gothic", monospace;
  text-shadow: 2px 2px 0 #000;
}

.h-main-trigger:disabled {
  cursor: default;
  opacity: .72;
  animation: none;
}

.h-offerings {
  width: min(540px, 94vw);
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.h-offerings button {
  width: 100%;
  aspect-ratio: 1 / 1.18;
  border: 1px solid rgba(255, 222, 157, .22);
  color: rgba(255, 231, 184, .42);
  background:
    linear-gradient(180deg, rgba(248,223,177,.14), rgba(67,0,0,.28)),
    #100503;
  font: 900 13px/1 "MS Gothic", monospace;
  cursor: pointer;
  transition: .18s ease;
}

.h-offerings button.is-open {
  color: #170400;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.72), transparent 13%),
    #d9bc83;
  box-shadow: 0 0 22px rgba(255, 50, 50, .34);
  transform: translateY(-2px);
}

.h-offerings button.is-next {
  color: #fff3c8;
  border-color: rgba(255, 69, 76, .75);
  box-shadow: 0 0 22px rgba(255, 0, 38, .48);
  animation: hNextFlicker .7s steps(2) infinite;
}

.h-god {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(76vw, 760px);
  max-height: 94vh;
  margin: 0;
  opacity: var(--h-god-opacity, 0);
  transform: translate(-50%, var(--h-god-y, -50%)) scale(var(--h-god-scale, .74));
  filter:
    brightness(var(--h-god-bright, .3))
    contrast(var(--h-god-contrast, 1.05))
    blur(var(--h-god-blur, 8px));
  pointer-events: none;
}

.h-god img {
  width: 100%;
  max-height: 94vh;
  object-fit: contain;
  filter: drop-shadow(0 0 46px rgba(164,0,0,.58));
}

.h-god figcaption {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  min-width: min(460px, 82vw);
  padding: 8px 12px;
  color: #fff1c4;
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,220,142,.32);
  font: 900 14px/1.4 "MS Gothic", monospace;
  text-align: center;
  opacity: var(--h-caption-opacity, 0);
}

.h-exit {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 18;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .24s ease;
}

.h-exit a {
  display: inline-grid;
  min-height: 36px;
  place-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 225, 160, .32);
  color: #ffe0a0;
  background: rgba(0,0,0,.72);
  font: 900 12px/1 "MS Gothic", monospace;
  text-decoration: none;
}

body.h-worshipped .h-exit {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.h-worshipped .h-altar {
  animation: hKneel .9s cubic-bezier(.05,.8,.08,1) both;
}

body.h-worshipped .h-god {
  z-index: 22;
  opacity: 1;
  filter: brightness(1.08) contrast(1.45);
  animation: hGodDropScare .92s steps(5) both, hGodAfterJitter .22s steps(2) .92s infinite;
}

.h-virtual-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: 28px;
  height: 34px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, -2px) rotate(-10deg);
  transition:
    left .68s cubic-bezier(.02,.8,.03,1),
    top .68s cubic-bezier(.02,.8,.03,1),
    opacity .12s steps(2),
    transform .12s steps(2);
  filter: drop-shadow(0 0 10px rgba(255,0,0,.72));
}

.h-virtual-cursor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 30px solid #fff8dc;
  border-right: 17px solid transparent;
  filter: invert(1) contrast(2.2);
}

.h-virtual-cursor::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  width: 10px;
  height: 18px;
  background: #fff8dc;
  transform: rotate(-22deg);
  filter: invert(1) contrast(2.2);
}

.h-virtual-cursor.is-visible {
  opacity: 1;
}

.h-virtual-cursor.is-pressing {
  transform: translate(-4px, -2px) rotate(-10deg) scale(.78);
  filter: invert(1) drop-shadow(0 0 18px rgba(255,255,255,.95));
}

body.h-auto-clicking .h-main-trigger {
  animation: hPulse .18s steps(2) infinite;
}

body.h-step-6 .h-stage,
body.h-step-7 .h-stage,
body.h-step-8 .h-stage {
  animation: hStageUnsteady .28s steps(2) infinite;
}

body.h-step-9 .h-stage {
  animation: hStageUnsteady .15s steps(2) infinite;
}

.h-stage.is-hit {
  animation: hHit .18s steps(2) both;
}

@keyframes hScan {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(12px); }
}

@keyframes hPulse {
  0%, 100% { box-shadow: inset 0 0 36px rgba(255,220,150,.2), 0 0 var(--h-glow, 34px) rgba(197,0,26,.42); }
  50% { box-shadow: inset 0 0 48px rgba(255,220,150,.36), 0 0 var(--h-glow-peak, 48px) rgba(255,0,38,.62); }
}

@keyframes hNextFlicker {
  50% { filter: invert(1); transform: translateY(-4px); }
}

@keyframes hEyeBlink {
  0%, 88%, 100% { clip-path: inset(0 0 0 0 round 50%); }
  92% { clip-path: inset(48% 0 48% 0 round 50%); }
}

@keyframes hStageUnsteady {
  50% { transform: translate(2px, -1px); }
}

@keyframes hHit {
  0% { filter: invert(1); transform: translateX(-4px); }
  100% { filter: none; transform: translateX(0); }
}

@keyframes hClickInvite {
  50% {
    filter: invert(1) contrast(1.8);
    transform: translateY(-2px) skewX(-2deg);
  }
}

@keyframes hKneel {
  0% { opacity: 1; transform: translateY(16px); }
  100% { opacity: 0; transform: translateY(28vh) scale(.86); }
}

@keyframes hGodArrival {
  0% { transform: translate(-50%, -50%) scale(.78); filter: invert(1) brightness(1.7) contrast(2); }
  22% { transform: translate(calc(-50% - 10px), calc(-50% + 6px)) scale(1.16); }
  46% { transform: translate(calc(-50% + 8px), calc(-50% - 5px)) scale(.98); }
  100% { transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes hGodBreath {
  50% { transform: translate(-50%, calc(-50% - 8px)) scale(1.07); filter: brightness(1.2) contrast(1.55); }
}

@keyframes hGodScareFlash {
  0% { opacity: 0; filter: invert(0); }
  8% { opacity: 1; filter: invert(1) contrast(3); }
  18% { opacity: .2; }
  32% { opacity: .9; transform: translateX(-12px); }
  48% { opacity: .28; transform: translateX(9px); }
  70% { opacity: .72; }
  100% { opacity: 0; }
}

@keyframes hGodDropScare {
  0% {
    opacity: 0;
    transform: translate(-50%, -78%) scale(.12) rotate(8deg);
    filter: invert(1) brightness(2.2) contrast(2.8) blur(12px);
  }
  12% {
    opacity: 1;
    transform: translate(calc(-50% - 18px), calc(-50% + 22px)) scale(1.48) rotate(-4deg);
    filter: invert(1) brightness(2.5) contrast(3.1) blur(0);
  }
  28% {
    transform: translate(calc(-50% + 14px), calc(-50% - 18px)) scale(.92) rotate(2deg);
    filter: brightness(.62) contrast(2.4);
  }
  44% {
    transform: translate(-50%, -50%) scale(1.24);
    filter: brightness(1.55) contrast(1.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    filter: brightness(1.12) contrast(1.7);
  }
}

@keyframes hGodAfterJitter {
  50% {
    transform: translate(calc(-50% + 3px), calc(-50% - 2px)) scale(1.09);
    filter: brightness(1.2) contrast(1.9) hue-rotate(-8deg);
  }
}

@media (max-width: 760px) {
  .h-stage {
    min-height: calc(100svh - 46px);
    padding: 74px 12px 70px;
  }

  .h-readout {
    top: 52px;
    right: 8px;
  }

  .h-altar {
    width: min(100%, 520px);
  }

  .h-altar h1 {
    font-size: clamp(30px, 11vw, 54px);
  }

  .h-copy {
    min-height: 6.4em;
    font-size: 13px;
  }

  .h-forbidden {
    min-height: 2.6em;
    font-size: 15px;
  }

  .h-main-trigger {
    width: min(214px, 66vw);
  }

  .h-offerings {
    grid-template-columns: repeat(9, minmax(28px, 1fr));
    gap: 4px;
  }

  .h-offerings button {
    font-size: 11px;
  }

  .h-god {
    width: min(112vw, 600px);
  }
}