/* pai (.pp) e filhos se mexem separados: o golpe só chacoalha quem apanhou (.khit = o filho atingido) */
.khit{animation:shake .3s;transform-origin:120px 170px}
/* 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:41;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.kdrag>div{position:relative;width:100%;height:100%;transform-origin:50% 0;animation:kdang .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}
@keyframes kfloat{from{transform:translateY(-7px) rotate(-5deg)}to{transform:translateY(7px) rotate(5deg)}}
.kdrag.todem{transition:left 1.15s ease-in,top 1.15s ease-in,transform 1.15s ease-in;transform:translate(-50%,-50%) scale(.8) rotate(-18deg)}
.kdrag.gone{transition:transform .16s ease-in,opacity .16s;transform:translate(-50%,-50%) scale(.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 .9s linear forwards}
.kdrag.mark .kpent .bl{animation-delay:.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:37;pointer-events:none;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 0 8px #000,0 0 14px var(--c);animation:dzp .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:.3}to{opacity:.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:42;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 .35s cubic-bezier(.3,1.6,.5,1);animation:baalpop .35s cubic-bezier(.3,1.5,.5,1) backwards;filter:drop-shadow(0 5px 6px rgba(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:42;animation:none;filter:none}
.baalsk.sh{transform:translate(-26px,-30px) rotate(-16deg)}
.baalsk.tie svg{animation:baaltie .28s ease-out}
.baalsk.wrig svg{animation:baalwrig .36s ease-in-out infinite}
.baalsk .bp{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.2)}
.baalsk.wrig .bp{animation:baalbump .5s ease-in-out infinite}
.baalsk.wrig .b1{animation-delay:-.17s}.baalsk.wrig .b2{animation-delay:-.3s;animation-duration:.62s}.baalsk.wrig .b3{animation-delay:-.4s;animation-duration:.44s}.baalsk.wrig .b4{animation-delay:-.08s;animation-duration:.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 .5s steps(1) forwards}
.baalfx.on .gl{animation:baalglint .75s ease-out forwards}
@keyframes baalpop{from{transform:scale(0) rotate(-40deg)}}
@keyframes baaltie{0%{transform:scale(1.25,.7)}50%{transform:scale(.85,1.18)}100%{transform:scale(1)}}
@keyframes baalwrig{0%,100%{transform:rotate(-5deg) scale(1.06,.95) skewX(4deg)}25%{transform:rotate(4deg) scale(.95,1.07) translateY(-5px)}50%{transform:rotate(6deg) scale(1.08,.93) skewX(-5deg)}75%{transform:rotate(-3deg) scale(.96,1.05) translateY(-3px)}}
@keyframes baalbump{0%,100%{transform:scale(.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(.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 .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 .09s linear infinite alternate}
.demon .kdrag.molk.moldead>div{animation:none;filter:saturate(.6) brightness(.75)}
@keyframes molstr{from{transform:translate(-2px,1px) rotate(-7deg)}to{transform:translate(2px,-1px) rotate(7deg)}}
.dgo .molsw{animation:molsw .6s ease-in-out infinite alternate}
@keyframes molsw{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.dgo .moldr path{stroke-dasharray:100;animation:moldr .7s ease-in both;animation-delay:var(--dl,0s)}
.dgo .moldr circle{animation:moldp .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,.5)}
.belstreak{position:absolute;z-index:40;pointer-events:none;width:46px;margin-left:-23px;border-radius:23px 23px 6px 6px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.5) 55%,rgba(226,36,58,.85));animation:belstreak .34s ease-out forwards}
@keyframes belstreak{from{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(.15)}}
.belpile{position:absolute;z-index:39;pointer-events:none;width:280px;height:160px;margin-left:-140px;transform-origin:50% 68%;animation:belsplat .32s cubic-bezier(.2,1.7,.4,1) both;filter:drop-shadow(0 3px 5px rgba(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(.15,.05)}to{transform:scale(1)}}
@keyframes belpool{from{transform:scale(.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,.7),3px -2px 0 -1px rgba(220,235,255,.7);opacity:0;animation:belfly 1.1s linear infinite,belflyin .4s .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:40;width:170px;height:170px;pointer-events:none;opacity:0;transition:transform .18s ease-out,opacity .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 .5s ease-in,opacity .5s}
.demon.laugh svg{animation:dlaugh .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:38;overflow:hidden;opacity:0;transition:opacity .5s;background:radial-gradient(circle at 50% 45%,rgba(70,0,10,.74),rgba(0,0,0,.95) 70%)}
.rit.on{opacity:1}
.rit .rbg,.rit .rbg2{position:absolute;inset:-60%;opacity:0;transition:opacity .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,.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 .8s}
.rit.on .rpent.big{opacity:.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:.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:.06em;text-transform:none;color:#fff;opacity:.75}
.rit.psy .rbg{opacity:.4}.rit.psy .rbg2{opacity:.5}.rit.psy .rname{opacity:1}.rit.psy .rpent.big{opacity:1}.rit.psy .rpent.sm{opacity:.8}.rit.psy .rface{opacity:.3}
@keyframes rspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){
 .rit.psy{animation:rhue .8s linear infinite}
 .rit.psy .rbg{animation:rspin 3s linear infinite reverse}
 .rit.psy .rbg2{animation:rzoom .45s linear infinite}
 .rit.psy .rpent.big{animation:rspin 2.2s linear infinite,rpulse .2s steps(2) infinite}
 .rit.psy .rpent.sm{opacity:0;animation:rblink .36s steps(1) infinite}
 .rit.psy .rface{opacity:0;animation:rface .62s steps(1) infinite}
 .rit.psy .rname{animation:rglitch .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:.3}}
 @keyframes rblink{0%{opacity:1;transform:scale(1) rotate(0deg)}35%{opacity:0}60%{opacity:.95;transform:scale(1.5) rotate(36deg)}80%{opacity:0}}
 @keyframes rface{0%{opacity:0}62%{opacity:.95;transform:scale(1.08)}74%{opacity:0}86%{opacity:.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:86;display:grid;place-items:center;text-align:center;padding:20px;color:#fff;background:radial-gradient(circle,rgba(46,0,8,.84),rgba(0,0,0,.96) 72%);animation:lvin .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:.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:.6}
.aura{position:absolute;pointer-events:none}
.aura::before{content:"";position:absolute;inset:26% -4% -2%;border-radius:50%;background:radial-gradient(closest-side,var(--ac),transparent);opacity:.3;mix-blend-mode:screen;animation:apulse 1.3s ease-in-out infinite alternate}
@keyframes apulse{from{opacity:.16;transform:scale(.94)}to{opacity:.42;transform:scale(1.04)}}
.aura .ppill{position:absolute;left:50%;top:15%;transform:translate(-50%,-100%);white-space:nowrap;padding:3px 9px;border-radius:12px;background:rgba(0,0,0,.78);border:1px solid var(--ac);color:var(--ac);font-weight:900;font-size:10.5px;letter-spacing:.04em}
.aura .cr{position:absolute;left:50%;top:17%;width:26%;margin-left:-13%;filter:drop-shadow(0 0 8px #F5B400);animation:kfloat 1.4s ease-in-out infinite alternate}
.aura .sp{position:absolute;width:7px;height:7px;background:#FFE36B;transform:rotate(45deg);box-shadow:0 0 8px #F5B400;animation:asp 1.1s ease-in-out infinite}
@keyframes asp{0%,100%{opacity:0;transform:rotate(45deg) scale(.3)}50%{opacity:1;transform:rotate(45deg) scale(1.2)}}
.aura .fl{position:absolute;bottom:1%;width:11%;height:14%;opacity:.85;border-radius:50% 50% 50% 50%/72% 72% 28% 28%;background:radial-gradient(ellipse at 50% 85%,#FFF3A0 0 18%,#FFB01F 38%,#FF4A12 62%,transparent 74%);mix-blend-mode:screen;transform-origin:50% 100%;animation:afl .5s ease-in-out infinite alternate}
@keyframes afl{from{transform:scale(.8,.7) skewX(-7deg)}to{transform:scale(1.05,1.25) skewX(8deg)}}
.aura .fy{position:absolute;left:50%;top:42%;width:0;height:0;animation:rspin var(--d) linear infinite}
.aura .fy::after{content:"";position:absolute;left:var(--r);top:var(--y);width:7px;height:5px;border-radius:50%;background:#070707;box-shadow:-3px -3px 0 -1px rgba(215,235,255,.75),3px -3px 0 -1px rgba(215,235,255,.75)}