/* pai (.pp) e filhos se mexem separados: o golpe só chacoalha quem apanhou (.khit = o filho atingido) */
.khit {
  animation: shake 0.3s;
  transform-origin: var(--peepee-pivot-body);
}
/* sacrifício: o filho arrastado (.kdrag) balança pendurado no dedo e, no ritual, flutua (.float), recebe a marca (.mark, .kpent) e é levado (.todem).
   Cada borda tem uma zona de oferenda (.dz) e um demônio (.demon) que espia, abre a boca (.maw) e ri (.laugh) */
.app.hell #s-home,
.app.hell #s-home * {
  touch-action: none;
}
.kdrag {
  position: absolute;
  z-index: calc(var(--layer-sacrifice) + 5);
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.kdrag > div {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 0;
  animation: kdang 0.45s ease-in-out infinite alternate;
}
.kdrag svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@keyframes kdang {
  from {
    transform: rotate(-13deg);
  }
  to {
    transform: rotate(13deg);
  }
}
.kdrag.float {
  transition:
    left 1s ease-in-out,
    top 1s ease-in-out,
    transform 1s ease-in-out;
  transform: translate(-50%, -50%) scale(1.9);
}
.kdrag.float > div {
  transform-origin: 50% 50%;
  animation: kfloat 1.5s ease-in-out infinite alternate;
}
.kdrag.todem {
  transition:
    left 1.15s ease-in,
    top 1.15s ease-in,
    transform 1.15s ease-in;
  transform: translate(-50%, -50%) scale(0.8) rotate(-18deg);
}
.kdrag.gone {
  transition:
    transform 0.16s ease-in,
    opacity 0.16s;
  transform: translate(-50%, -50%) scale(0.1) rotate(200deg);
  opacity: 0;
}
.kpent path,
.kpent circle {
  fill: none;
  stroke: #8e0a14;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.kpent .bl {
  stroke-width: 2.6;
  stroke: #c2141c;
}
.kdrag.mark .kpent path,
.kdrag.mark .kpent circle {
  animation: kcarve 0.9s linear forwards;
}
.kdrag.mark .kpent .bl {
  animation-delay: 0.8s;
  animation-duration: 1.3s;
}
.kdrag.glow .kpent {
  filter: drop-shadow(0 0 3px #ff2a44) drop-shadow(0 0 9px #ff2a44);
}
.kdrag.glow .kpent path,
.kdrag.glow .kpent circle {
  stroke: #ff5a6e;
}
@keyframes kcarve {
  to {
    stroke-dashoffset: 0;
  }
}
.dz {
  position: absolute;
  z-index: var(--layer-sacrifice);
  pointer-events: none;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 8px #000,
    0 0 14px var(--c);
  animation: dzp 0.8s ease-in-out infinite alternate;
}
.dz.l {
  left: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: linear-gradient(90deg, var(--c), transparent);
}
.dz.r {
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: linear-gradient(270deg, var(--c), transparent);
}
.dz.t {
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  background: linear-gradient(180deg, var(--c), transparent);
}
.dz.l span,
.dz.r span {
  writing-mode: vertical-rl;
}
.dz.l span {
  transform: rotate(180deg);
}
@keyframes dzp {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 0.75;
  }
}
.dsv svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.dsv .m1,
.dsv .mh,
.dsv .sl,
.dsv.maw .m0,
.dsv.sly .m0 {
  display: none;
}
.dsv.maw .m1,
.dsv.maw .mh,
.dsv.hold .mh,
.dsv.sly .sl {
  display: inline;
}
.dsv .dgo {
  position: absolute;
  inset: 0;
}
.pcard .pd {
  position: relative;
}
.pcard .pd.gory {
  margin-bottom: 48px;
}
.kpent.done path,
.kpent.done circle {
  stroke-dashoffset: 0;
  animation: none !important;
}
.gut {
  position: absolute;
  z-index: calc(var(--layer-sacrifice) + 6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.gut svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* final do Baal: a sacola (.baalsk) fica dentro do demônio e anda com ele; .front = só a frente, por cima do filho enquanto ele cai dentro;
   .shut = amarrada, .tie = o tranco do nó, .wrig = o filho se debatendo, .sh = jogada no ombro. .baalfx = piscadela e brilho no dente de ouro */
.baalsk {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transform-origin: 20% 20%;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
  animation: baalpop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6));
}
.baalsk svg,
.dsv .baalsk svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform-origin: 50% 95%;
}
.baalsk .cl,
.baalsk.shut .op,
.baalsk.shut .bk,
.baalsk.front .bk {
  display: none;
}
.baalsk.shut .cl {
  display: inline;
}
.baalsk.front {
  z-index: calc(var(--layer-sacrifice) + 7);
  animation: none;
  filter: none;
}
.baalsk.sh {
  transform: translate(-26px, -30px) rotate(-16deg);
}
.baalsk.tie svg {
  animation: baaltie 0.28s ease-out;
}
.baalsk.wrig svg {
  animation: baalwrig 0.36s ease-in-out infinite;
}
.baalsk .bp {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0.2);
}
.baalsk.wrig .bp {
  animation: baalbump 0.5s ease-in-out infinite;
}
.baalsk.wrig .b1 {
  animation-delay: -0.17s;
}
.baalsk.wrig .b2 {
  animation-delay: -0.3s;
  animation-duration: 0.62s;
}
.baalsk.wrig .b3 {
  animation-delay: -0.4s;
  animation-duration: 0.44s;
}
.baalsk.wrig .b4 {
  animation-delay: -0.08s;
  animation-duration: 0.7s;
}
.baalfx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.baalfx .lid,
.baalfx .gl {
  opacity: 0;
}
.baalfx .gl {
  transform-origin: 134px 172px;
}
.baalfx.on .lid {
  animation: baalwink 0.5s steps(1) forwards;
}
.baalfx.on .gl {
  animation: baalglint 0.75s ease-out forwards;
}
@keyframes baalpop {
  from {
    transform: scale(0) rotate(-40deg);
  }
}
@keyframes baaltie {
  0% {
    transform: scale(1.25, 0.7);
  }
  50% {
    transform: scale(0.85, 1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes baalwrig {
  0%,
  100% {
    transform: rotate(-5deg) scale(1.06, 0.95) skewX(4deg);
  }
  25% {
    transform: rotate(4deg) scale(0.95, 1.07) translateY(-5px);
  }
  50% {
    transform: rotate(6deg) scale(1.08, 0.93) skewX(-5deg);
  }
  75% {
    transform: rotate(-3deg) scale(0.96, 1.05) translateY(-3px);
  }
}
@keyframes baalbump {
  0%,
  100% {
    transform: scale(0.2);
  }
  45% {
    transform: scale(1.25);
  }
  60% {
    transform: scale(1);
  }
}
@keyframes baalwink {
  0% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes baalglint {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.5) rotate(40deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.9) rotate(70deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(120deg);
  }
}
/* Moloque mastigando: dentes ensanguentados (.molt) que se fecham por cima do filho (.molc), o filho dentro da boca (.molk, sem vida = .moldead),
   e a sujeira na camada .dgo: tripas balançando (.molsw) e sangue escorrendo (.moldr). Valem também no retrato do cartão */
.dsv .molt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.molt .mu,
.molt .ml {
  transition: transform 0.06s ease-in;
}
.demon.molc .molt .mu {
  transform: translate(0, 27px);
}
.demon.molc .molt .ml {
  transform: translate(0, -24px);
}
.demon .kdrag.molk {
  z-index: auto;
  filter: none;
}
.demon .kdrag.molk > div {
  transform-origin: 50% 50%;
  animation: molstr 0.09s linear infinite alternate;
}
.demon .kdrag.molk.moldead > div {
  animation: none;
  filter: saturate(0.6) brightness(0.75);
}
@keyframes molstr {
  from {
    transform: translate(-2px, 1px) rotate(-7deg);
  }
  to {
    transform: translate(2px, -1px) rotate(7deg);
  }
}
.dgo .molsw {
  animation: molsw 0.6s ease-in-out infinite alternate;
}
@keyframes molsw {
  from {
    transform: rotate(-9deg);
  }
  to {
    transform: rotate(9deg);
  }
}
.dgo .moldr path {
  stroke-dasharray: 100;
  animation: moldr 0.7s ease-in both;
  animation-delay: var(--dl, 0s);
}
.dgo .moldr circle {
  animation: moldp 0.7s ease-in both;
  animation-delay: var(--dl, 0s);
}
@keyframes moldr {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes moldp {
  from {
    transform: translateY(calc(var(--l) * -1));
  }
  to {
    transform: none;
  }
}
/* final de Belzebu: ele embala o filho nas mãos (.belrock no demônio, .belcradle no filho: os dois giram juntos em volta da borda de cima),
   depois o arremessa no chão (.belthrow, .belstreak) e sobra o monte de vísceras (.belpile), com moscas (.belfly) em volta */
.demon.belrock svg {
  transform-origin: 50% 100%;
  animation: belrock 1.1s ease-in-out infinite alternate;
}
.kdrag.float.belcradle > div {
  transform-origin: 50% var(--bo, -60px);
  animation: belrock 1.1s ease-in-out infinite alternate;
}
@keyframes belrock {
  from {
    transform: rotate(-7deg);
  }
  to {
    transform: rotate(7deg);
  }
}
.kdrag.float.belthrow > div {
  animation: none;
}
.ftx.belsoft {
  font-style: italic;
  text-shadow:
    0 0 10px #ff8fb8,
    0 2px 0 rgba(0, 0, 0, 0.5);
}
.belstreak {
  position: absolute;
  z-index: calc(var(--layer-sacrifice) + 4);
  pointer-events: none;
  width: 46px;
  margin-left: -23px;
  border-radius: 23px 23px 6px 6px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.5) 55%,
    rgba(226, 36, 58, 0.85)
  );
  animation: belstreak 0.34s ease-out forwards;
}
@keyframes belstreak {
  from {
    opacity: 1;
    transform: scaleX(1);
  }
  to {
    opacity: 0;
    transform: scaleX(0.15);
  }
}
.belpile {
  position: absolute;
  z-index: calc(var(--layer-sacrifice) + 2);
  pointer-events: none;
  width: 280px;
  height: 160px;
  margin-left: -140px;
  transform-origin: 50% 68%;
  animation: belsplat 0.32s cubic-bezier(0.2, 1.7, 0.4, 1) both;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
.belpile svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.belpile .bpool {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: belpool 2.6s ease-out both;
}
@keyframes belsplat {
  from {
    transform: scale(0.15, 0.05);
  }
  to {
    transform: scale(1);
  }
}
@keyframes belpool {
  from {
    transform: scale(0.55);
  }
  to {
    transform: scale(1);
  }
}
.belfly {
  position: absolute;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: #050505;
  box-shadow:
    -3px -2px 0 -1px rgba(220, 235, 255, 0.7),
    3px -2px 0 -1px rgba(220, 235, 255, 0.7);
  opacity: 0;
  animation:
    belfly 1.1s linear infinite,
    belflyin 0.4s 0.5s forwards;
}
@keyframes belfly {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(16px, -11px);
  }
  50% {
    transform: translate(30px, 2px);
  }
  75% {
    transform: translate(13px, 12px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes belflyin {
  to {
    opacity: 1;
  }
}

.demon {
  position: absolute;
  z-index: calc(var(--layer-sacrifice) + 3);
  width: 170px;
  height: 170px;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.18s ease-out,
    opacity 0.18s;
  filter: drop-shadow(0 0 18px var(--c));
}
.demon.dl {
  left: 0;
}
.demon.dr {
  right: 0;
}
.demon.dt {
  top: 0;
}
.demon.slow {
  transition:
    transform 0.5s ease-in,
    opacity 0.5s;
}
.demon.laugh svg {
  animation: dlaugh 0.17s ease-in-out infinite alternate;
}
@keyframes dlaugh {
  from {
    transform: translateY(-6px) rotate(-4deg);
  }
  to {
    transform: translateY(6px) rotate(4deg);
  }
}
/* o ritual: véu escuro por cima do jogo, pentagrama grande girando atrás do filho e, no interlúdio (.psy), pentagramas piscando, cores girando e o rosto do demônio em clarões */
.rit {
  position: absolute;
  inset: 0;
  z-index: calc(var(--layer-sacrifice) + 1);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s;
  background: radial-gradient(circle at 50% 45%, rgba(70, 0, 10, 0.74), rgba(0, 0, 0, 0.95) 70%);
}
.rit.on {
  opacity: 1;
}
.rit .rbg,
.rit .rbg2 {
  position: absolute;
  inset: -60%;
  opacity: 0;
  transition: opacity 0.3s;
}
.rit .rbg {
  background: repeating-conic-gradient(from 0deg at 50% 47.3%, #ff0040 0 9deg, #12000a 9deg 18deg);
  mix-blend-mode: screen;
}
.rit .rbg2 {
  background: repeating-radial-gradient(
    circle at 50% 47.3%,
    transparent 0 24px,
    rgba(255, 0, 60, 0.55) 24px 30px
  );
}
.rit .rpent {
  position: absolute;
  overflow: visible;
  opacity: 0;
}
.rit .rpent path,
.rit .rpent circle {
  fill: none;
  stroke: #ff1a2e;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
.rit .rpent.big {
  left: 50%;
  top: 45%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  filter: drop-shadow(0 0 8px #ff1a2e);
  transition: opacity 0.8s;
}
.rit.on .rpent.big {
  opacity: 0.5;
  animation: rspin 10s linear infinite;
}
.rit .rface {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  opacity: 0;
}
.rit .rname {
  position: absolute;
  left: 0;
  right: 0;
  top: 11%;
  text-align: center;
  font-family: var(--f-horror);
  font-weight: 400;
  font-size: 66px;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 24px #ff1a2e,
    4px 0 #00f0ff,
    -4px 0 #ff00e0;
  opacity: 0;
}
.rit .rcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17%;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ff6a7a;
  text-shadow: 0 0 12px #ff1a2e;
}
.rit .rcap small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #fff;
  opacity: 0.75;
}
.rit.psy .rbg {
  opacity: 0.4;
}
.rit.psy .rbg2 {
  opacity: 0.5;
}
.rit.psy .rname {
  opacity: 1;
}
.rit.psy .rpent.big {
  opacity: 1;
}
.rit.psy .rpent.sm {
  opacity: 0.8;
}
.rit.psy .rface {
  opacity: 0.3;
}
@media (prefers-reduced-motion: no-preference) {
  .rit.psy {
    animation: rhue 0.8s linear infinite;
  }
  .rit.psy .rbg {
    animation: rspin 3s linear infinite reverse;
  }
  .rit.psy .rbg2 {
    animation: rzoom 0.45s linear infinite;
  }
  .rit.psy .rpent.big {
    animation:
      rspin 2.2s linear infinite,
      rpulse 0.2s steps(2) infinite;
  }
  .rit.psy .rpent.sm {
    opacity: 0;
    animation: rblink 0.36s steps(1) infinite;
  }
  .rit.psy .rface {
    opacity: 0;
    animation: rface 0.62s steps(1) infinite;
  }
  .rit.psy .rname {
    animation: rglitch 0.16s steps(2) infinite;
  }
  @keyframes rhue {
    from {
      filter: hue-rotate(0deg) saturate(2.4);
    }
    to {
      filter: hue-rotate(360deg) saturate(2.4);
    }
  }
  @keyframes rzoom {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.14);
    }
  }
  @keyframes rpulse {
    50% {
      opacity: 0.3;
    }
  }
  @keyframes rblink {
    0% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
    35% {
      opacity: 0;
    }
    60% {
      opacity: 0.95;
      transform: scale(1.5) rotate(36deg);
    }
    80% {
      opacity: 0;
    }
  }
  @keyframes rface {
    0% {
      opacity: 0;
    }
    62% {
      opacity: 0.95;
      transform: scale(1.08);
    }
    74% {
      opacity: 0;
    }
    86% {
      opacity: 0.7;
      transform: scale(1.3) rotate(-4deg);
    }
    93% {
      opacity: 0;
    }
  }
  @keyframes rglitch {
    0% {
      transform: translate(-3px, 1px) skewX(-6deg);
    }
    50% {
      transform: translate(3px, -2px) skewX(5deg) scale(1.04);
    }
  }
}
/* recompensa: o cartão do pacto selado e a aura que fica no PeePee enquanto o pacto durar */
.pcard {
  position: absolute;
  inset: 0;
  z-index: calc(var(--layer-cutscene) + 1);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: #fff;
  background: radial-gradient(circle, rgba(46, 0, 8, 0.84), rgba(0, 0, 0, 0.96) 72%);
  animation: lvin 0.3s ease-out;
}
.pcard .pd {
  width: 170px;
  height: 170px;
  margin: 0 auto 4px;
  filter: drop-shadow(0 0 22px var(--c));
}
.pcard small {
  display: block;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c);
}
.pcard b {
  display: block;
  font-family: var(--f-horror);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  text-shadow: 0 0 26px var(--c);
}
.pcard ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.55;
}
.pcard li:first-child {
  color: var(--c);
  font-size: 19px;
}
.pcard em {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  opacity: 0.6;
}
.sacrifice-pact-pill {
  position: relative;
  z-index: var(--layer-hud);
  flex: none;
  align-self: center;
  margin-top: 6px;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid var(--ac);
  color: var(--ac);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.sacrifice-pact-glow {
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: apulse 1.3s ease-in-out infinite alternate;
}
@keyframes apulse {
  from {
    opacity: 0.16;
    transform: scale(0.94);
  }
  to {
    opacity: 0.42;
    transform: scale(1.04);
  }
}
.sacrifice-pact-crown {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: kfloat 1.4s ease-in-out infinite alternate;
}
.sacrifice-pact-spark {
  transform: scale(0);
  animation: sacrifice-pact-spark-twinkle 1.1s ease-in-out infinite;
}
@keyframes sacrifice-pact-spark-twinkle {
  0%,
  100% {
    transform: scale(0) rotate(-45deg);
  }
  40%,
  60% {
    transform: scale(1) rotate(0deg);
  }
}
.sacrifice-pact-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-name: sacrifice-pact-flame-lick, sacrifice-pact-flame-swap-a;
  animation-duration: var(--sacrifice-pact-flame-time), calc(var(--sacrifice-pact-flame-time) * 4);
  animation-timing-function: ease-in-out, steps(1);
  animation-iteration-count: infinite;
  animation-direction: alternate, normal;
}
.sacrifice-pact-flame-pose-b {
  animation-name: sacrifice-pact-flame-lick, sacrifice-pact-flame-swap-b;
}
@keyframes sacrifice-pact-flame-lick {
  from {
    transform: scale(1.08, 0.72) skewX(-5deg);
  }
  to {
    transform: scale(0.94, 1.12) skewX(6deg);
  }
}
@keyframes sacrifice-pact-flame-swap-a {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes sacrifice-pact-flame-swap-b {
  0% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}
.sacrifice-pact-fly {
  animation: rspin 2s linear infinite;
}
.sacrifice-pact-fly-wing {
  opacity: 0.8;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sacrifice-pact-fly-wing-beat 0.14s steps(1) infinite;
}
@keyframes sacrifice-pact-fly-wing-beat {
  0% {
    transform: scaleY(1);
  }
  50%,
  100% {
    transform: scaleY(0.35);
  }
}