/* matadouro em teatro de sombras: parede de azulejo clareada pela névoa, cone de lâmpada no meio, chão e teto pretos; tudo que vive ali é silhueta preta */
.app.hell .scene {
  background: #030202;
}
.app.hell .scene::after {
  inset: 0;
  opacity: 1;
  background: radial-gradient(
    ellipse 110% 64% at 50% 56%,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.5) 100%
  );
}
.app.hell .scene-sky,
.app.hell .sun,
.app.hell .cloud,
.app.hell .stars {
  display: none;
}
.app.hell .isle {
  background: #5a0a0e;
  box-shadow: none;
  filter: none;
  transform: scale(calc(0.72 + var(--gore, 0) * 0.5), calc(0.6 + var(--gore, 0) * 0.5));
  transition: transform 1.2s;
}
.app.hell .embers i {
  width: 2px;
  height: 2px;
  background: #b8a8a0;
  box-shadow: none;
  animation-duration: 22s;
}
.app.hell .stage svg {
  filter: none;
}
.app.hell .hint {
  color: rgba(190, 172, 160, 0.9);
}
.hl .photo-backdrop {
  inset: auto 0 var(--sab);
  height: 680px;
  z-index: auto;
}
.hl .lamp {
  inset: 0 0 calc(226px + var(--sab));
  animation: hflk 9s steps(1) infinite;
}
.hl .lamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(214, 190, 180, 0.3);
  clip-path: polygon(41% 0, 59% 0, 90% 100%, 10% 100%);
}
@keyframes hflk {
  0%,
  100% {
    opacity: 1;
  }
  37% {
    opacity: 0.25;
  }
  38.2% {
    opacity: 0.9;
  }
  39.4% {
    opacity: 0.1;
  }
  41% {
    opacity: 1;
  }
  71% {
    opacity: 0.4;
  }
  72% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  91% {
    opacity: 1;
  }
}
.hl .bld {
  inset: 0;
  opacity: calc(0.5 + var(--gore, 0) * 0.5);
  transition: opacity 1s;
}
.hl .wb {
  border-radius: 3px;
  background: #7a1420;
}
.hl .hp {
  width: 54px;
  height: 100px;
}
.hl .tly {
  width: 60px;
  height: 34px;
  opacity: 0.5;
}
.hl .hang {
  top: -10px;
  width: 60px;
  transform-origin: 50% 0;
  animation: hsw 6s ease-in-out infinite alternate;
}
.hl .hang::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: var(--cb, 40px);
  width: 10px;
  margin-left: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M5 11v7' stroke='%23020303' stroke-width='2.2'/%3E%3Crect x='2.300' y='1' width='5.400' height='11' rx='2.700' fill='none' stroke='%23020303' stroke-width='1.800'/%3E%3C/svg%3E")
    repeat-y 0 0/10px 18px;
}
.hl .hang svg {
  position: absolute;
  left: 0;
  bottom: 0;
  height: auto;
}
.hl .hang .dp {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  background: #b3202f;
  animation: hdp 3.1s ease-in infinite;
}
@keyframes hsw {
  from {
    transform: rotate(-1.6deg);
  }
  to {
    transform: rotate(1.6deg);
  }
}
@keyframes hdp {
  0% {
    transform: translateY(0) scaleY(0.3);
    opacity: 0;
  }
  30% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: translateY(190px) scaleY(1.5);
    opacity: 0.9;
  }
}
.hl .fig {
  left: 1%;
  width: 58px;
  height: 204px;
  bottom: calc(222px + var(--sab));
  opacity: 0;
  animation: hfig 31s linear infinite;
}
@keyframes hfig {
  0%,
  54% {
    opacity: 0;
  }
  57% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  66.500% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.hl .ey {
  width: 15px;
  height: 4px;
  opacity: 0;
  animation: hey 13s linear infinite;
}
.hl .ey::before {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 8px;
  width: 1px;
  height: 900px;
  background: #020303;
}
.hl .ey::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -9px;
  width: 32px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M11 9L4 3 1 9M10 11L3 9 0 16M10 13L4 15 2 22M12 15L8 19 8 23M21 9L28 3 31 9M22 11L29 9 32 16M22 13L28 15 30 22M20 15L24 19 24 23' fill='none' stroke='%23020303' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='16' cy='11' rx='7.500' ry='6.500' fill='%23020303'/%3E%3Ccircle cx='13.200' cy='11.500' r='1.700' fill='%23d9d2c4'/%3E%3Ccircle cx='18.800' cy='11.500' r='1.700' fill='%23d9d2c4'/%3E%3C/svg%3E")
    no-repeat 0 0/32px 24px;
}
@keyframes hey {
  0%,
  60% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  74.500% {
    opacity: 0;
  }
  75.500% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}
.hl .gsp {
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  opacity: 0.92;
  animation: gsp 0.16s ease-out;
}
.hl .gsp .gdp {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: gdp 3.5s ease-out both;
}
@keyframes gsp {
  from {
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(0.2);
    opacity: 0;
  }
}
@keyframes gdp {
  from {
    transform: scaleY(0);
  }
}
/* matadouro: a interface vira ferro preto com sangue escorrendo por baixo das armas */
.app.hell #s-home .glass,
.app.hell .nav {
  background: rgba(5, 2, 2, 0.86);
  color: #c9bdb0;
  border-color: #2c0709;
  box-shadow:
    inset 0 1px 0 rgba(120, 20, 24, 0.3),
    0 10px 30px #000;
}
.app.hell .fight {
  padding: 8px 7px 8px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(46, 6, 10, 0.92), rgba(18, 3, 6, 0.94));
  box-shadow:
    0 0 0 1.5px #1a0204,
    0 0 0 4px #6e0a14,
    0 0 0 5.5px #2a0306,
    inset 0 0 22px rgba(142, 15, 32, 0.55),
    0 12px 26px rgba(0, 0, 0, 0.6);
}
.app.hell .fight::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: -6px;
  height: 9px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20366%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2010%20Q20%202%2044%207%20T92%205%20T140%208%20T190%204%20T240%207%20T290%203%20T340%207%20T366%206%20V14%20H0Z%22%20fill%3D%22%238E0F20%22%20stroke%3D%22%233A0408%22%20stroke-width%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%223%22%20r%3D%222%22%20fill%3D%22%238E0F20%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%221.5%22%20r%3D%221.4%22%20fill%3D%22%238E0F20%22%2F%3E%3Ccircle%20cx%3D%22205%22%20cy%3D%222%22%20r%3D%221.8%22%20fill%3D%22%238E0F20%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%221%22%20r%3D%221.3%22%20fill%3D%22%238E0F20%22%2F%3E%3Ccircle%20cx%3D%22352%22%20cy%3D%222.5%22%20r%3D%221.6%22%20fill%3D%22%238E0F20%22%2F%3E%3Cpath%20d%3D%22M10%209%20Q60%204%20120%208%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%20opacity%3D%22.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")
    0 0/100% 100% no-repeat;
  z-index: 2;
}
.app.hell .fight::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: calc(100% + 2px);
  height: 58px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20366%2058%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H366V4%20Q357.0%204.2%20348.0%205%20C348.0%2011.4%20345.6%2016.2%20345.6%2021.0%20A5.5%205.5%200%201%201%20338.4%2021.0%20C338.4%2016.2%20336.0%2011.4%20336.0%205%20Q327.5%207.4%20319.0%205%20C319.0%2013.8%20317.0%2020.4%20317.0%2027.0%20A4.8%204.8%200%201%201%20311.0%2027.0%20C311.0%2020.4%20309.0%2013.8%20309.0%205%20Q300.5%205.2%20292.0%205%20C292.0%208.2%20290.0%2010.6%20290.0%2013.0%20A4.8%204.8%200%201%201%20284.0%2013.0%20C284.0%2010.6%20282.0%208.2%20282.0%205%20Q272.5%204.6%20263.0%205%20C263.0%2011.4%20261.0%2016.2%20261.0%2021.0%20A4.8%204.8%200%201%201%20255.0%2021.0%20C255.0%2016.2%20253.0%2011.4%20253.0%205%20Q244.5%204.5%20236.0%205%20C236.0%2017.0%20233.6%2026.0%20233.6%2035.0%20A5.5%205.5%200%201%201%20226.4%2035.0%20C226.4%2026.0%20224.0%2017.0%20224.0%205%20Q216.0%205.2%20208.0%205%20C208.0%208.2%20206.0%2010.6%20206.0%2013.0%20A4.8%204.8%200%201%201%20200.0%2013.0%20C200.0%2010.6%20198.0%208.2%20198.0%205%20Q191.0%207.3%20184.0%205%20C184.0%2013.8%20180.8%2020.4%20180.8%2027.0%20A7.0%207.0%200%201%201%20171.2%2027.0%20C171.2%2020.4%20168.0%2013.8%20168.0%205%20Q161.0%204.7%20154.0%205%20C154.0%208.2%20151.6%2010.6%20151.6%2013.0%20A5.5%205.5%200%201%201%20144.4%2013.0%20C144.4%2010.6%20142.0%208.2%20142.0%205%20Q135.5%206.3%20129.0%205%20C129.0%208.2%20125.8%2010.6%20125.8%2013.0%20A7.0%207.0%200%201%201%20116.2%2013.0%20C116.2%2010.6%20113.0%208.2%20113.0%205%20Q105.0%206.6%2097.0%205%20C97.0%208.2%2095.0%2010.6%2095.0%2013.0%20A4.8%204.8%200%201%201%2089.0%2013.0%20C89.0%2010.6%2087.0%208.2%2087.0%205%20Q79.0%205.5%2071.0%205%20C71.0%209.8%2069.0%2013.4%2069.0%2017.0%20A4.8%204.8%200%201%201%2063.0%2017.0%20C63.0%2013.4%2061.0%209.8%2061.0%205%20Q54.5%206.2%2048.0%205%20C48.0%2017.0%2044.8%2026.0%2044.8%2035.0%20A7.0%207.0%200%201%201%2035.2%2035.0%20C35.2%2026.0%2032.0%2017.0%2032.0%205%20Q26.0%204.3%2020.0%205%20C20.0%208.2%2017.6%2010.6%2017.6%2013.0%20A5.5%205.5%200%201%201%2010.4%2013.0%20C10.4%2010.6%208.0%208.2%208.0%205%20Q4.0%207%200%204Z%22%20fill%3D%22%238E0F20%22%20stroke%3D%22%233A0408%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M340.5%207%20V20.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22340.1%22%20cy%3D%2219.4%22%20r%3D%221.5%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M312.8%207%20V26.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22312.3%22%20cy%3D%2225.6%22%20r%3D%221.3%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M285.8%207%20V12.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22285.3%22%20cy%3D%2211.6%22%20r%3D%221.3%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M256.8%207%20V20.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22256.3%22%20cy%3D%2219.6%22%20r%3D%221.3%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M228.5%207%20V34.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22228.1%22%20cy%3D%2233.4%22%20r%3D%221.5%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M201.8%207%20V12.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22201.3%22%20cy%3D%2211.6%22%20r%3D%221.3%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M174.0%207%20V26.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22173.6%22%20cy%3D%2224.9%22%20r%3D%222.0%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M146.5%207%20V12.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22146.1%22%20cy%3D%2211.3%22%20r%3D%221.5%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M119.0%207%20V12.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22118.5%22%20cy%3D%2210.9%22%20r%3D%222.0%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M90.8%207%20V12.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2290.3%22%20cy%3D%2211.6%22%20r%3D%221.3%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M64.8%207%20V16.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2264.3%22%20cy%3D%2215.6%22%20r%3D%221.3%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M38.0%207%20V34.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2237.5%22%20cy%3D%2232.9%22%20r%3D%222.0%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M12.5%207%20V12.0%22%20stroke%3D%22%23E0475C%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2212.1%22%20cy%3D%2211.3%22%20r%3D%221.5%22%20fill%3D%22%23FF9AA6%22%20opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E")
    0 0/100% 100% no-repeat;
  transform-origin: top;
  animation: fdrip 3.6s ease-in-out infinite;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}
@keyframes fdrip {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.06);
  }
}
.app.hell .fight .weps {
  position: relative;
  z-index: 3;
}
.app.hell .wep {
  background: linear-gradient(180deg, rgba(60, 10, 14, 0.85), rgba(26, 6, 9, 0.9));
  border-color: rgba(255, 90, 100, 0.14);
  color: #e6d3c6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.app.hell .wep.on {
  background: linear-gradient(180deg, #7a0a14, #3a0508);
  border-color: #ff2a44;
  box-shadow:
    0 0 14px rgba(255, 42, 68, 0.7),
    inset 0 0 8px rgba(255, 120, 130, 0.4);
}
.app.hell .nav button.on {
  background: #3a0508;
  box-shadow: none;
  color: #e6d9cc;
}
/* submundo: carrasco de couro com machado, diabretes voando, carniçal espiando da borda e ratazana correndo no rodapé */
.hl .crr {
  right: -14px;
  width: 132px;
  height: 264px;
  bottom: calc(214px + var(--sab));
  transform-origin: 50% 100%;
  animation: cbr 4.2s ease-in-out infinite;
}
.hl .crr .ce {
  animation: cey 3.3s ease-in-out infinite;
}
.hl .crr .axe {
  transform-origin: 21px 160px;
}
@keyframes cbr {
  50% {
    transform: scale(1.012, 1.022);
  }
}
@keyframes cey {
  50% {
    opacity: 0.3;
  }
}
.hl .imp {
  left: -80px;
  width: 56px;
  height: 36px;
  animation: impf 26s linear infinite;
}
.hl .imp .wg {
  transform-box: fill-box;
  transform-origin: 100% 80%;
  animation: impw 0.22s ease-in-out infinite alternate;
}
@keyframes impf {
  0% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(140px, -26px);
  }
  24% {
    transform: translate(290px, 14px);
  }
  36% {
    transform: translate(440px, -20px);
  }
  46%,
  100% {
    transform: translate(600px, 0);
  }
}
@keyframes impw {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(-0.4);
  }
}
.hl .ghl {
  left: -12px;
  width: 66px;
  height: 86px;
  bottom: calc(282px + var(--sab));
  animation: ghp 12s ease-in-out infinite;
}
@keyframes ghp {
  0%,
  30% {
    transform: translateX(-62px);
  }
  38%,
  82% {
    transform: translateX(0);
  }
  90%,
  100% {
    transform: translateX(-62px);
  }
}
.hl .rat {
  left: -50px;
  width: 40px;
  height: 18px;
  bottom: calc(220px + var(--sab));
  animation: ratr 19s linear infinite;
}
@keyframes ratr {
  0%,
  62% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(560px);
  }
}
@media (max-width: 350px) {
  .hl .crr {
    scale: 0.84;
  }
}
@media (max-height: 600px) {
  .hl .crr {
    scale: 0.72;
  }
}