/* roleta russa: cobre tudo (jogo e sheet inclusive) de 1 em 1 minuto */
.rr {
  z-index: calc(var(--layer-cutscene) + 2);
  background: radial-gradient(circle, rgba(60, 8, 16, 0.8), rgba(0, 0, 0, 0.95) 70%);
}
.rr b {
  font-size: 54px;
}
.rr .rcyl {
  width: 150px;
  height: 150px;
  margin: 10px auto 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 9px #e6dcc6;
  transition: transform 2.6s cubic-bezier(0.12, 0.7, 0.18, 1);
}
.rr .rcyl svg,
.rr .rpet svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rr .rmark {
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 14px solid transparent;
  border-top: 22px solid var(--gold);
  filter: drop-shadow(0 0 8px var(--gold));
}
.rr .rinfo {
  display: block;
  font-weight: 900;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}
.rr #rRes {
  display: block;
  text-align: center;
  font-family: var(--f-horror);
  font-weight: 400;
  font-size: 76px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-shadow:
    0 4px 0 #000,
    0 0 26px rgba(224, 36, 58, 0.8);
}
/* cena do tiro: PeePee de corpo inteiro (180x225 = desenho 240x300 a 75%) empunhando o revólver (.garm, desenhado pelo petSVG com o.gun).
   No palco (.rpet): .aim leva o cano à têmpora, .tense treme, .click é o gatilho em falso, .fire o coice do disparo, .limp o braço morto e .rhit o corpo tombando */
.rr .rscn {
  position: relative;
  width: 180px;
  height: 225px;
  margin: 6px auto 26px;
}
.rr .rscn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 248px;
  height: 248px;
  margin: -124px 0 0 -124px;
  border-radius: 50%;
  background: #e6dcc6;
}
.rr .rpet {
  position: absolute;
  inset: 0;
  transform-origin: 50% 95%;
}
.rr .rpet svg {
  overflow: visible;
}
.rr .rpet.rhit {
  animation: rhit 1.4s linear forwards;
}
.rr .garm {
  transform-origin: var(--peepee-pivot-right-shoulder);
  transform: rotate(75deg);
  transition: transform 0.55s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.rr .rpet.aim .garm {
  transform: none;
}
.rr .rpet.tense .garm {
  animation: gshk 0.09s linear infinite;
}
.rr .rpet.click .garm {
  animation: gclk 0.2s ease-out;
}
.rr .rpet.fire .garm {
  animation: gfire 0.3s ease-out;
}
.rr .rpet.limp .garm {
  transform: rotate(98deg);
  transition: transform 0.45s ease-in;
}
.rr .gmz {
  transform-box: fill-box;
  transform-origin: center;
  animation: gmz 0.3s ease-out forwards;
}
.rr .gdr {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: gdr 1.6s ease-out 0.1s forwards;
}
/* estrago fora do desenho: clarão, pedaços e gotas voando, respingos escorrendo na tela e a poça debaixo do corpo */
.rr .rfl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: rfl 0.4s ease-out forwards;
}
.rr .rgib {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.rr .rsplat {
  position: absolute;
  pointer-events: none;
  border-radius: 58% 42% 55% 45%/48% 60% 40% 52%;
  background: radial-gradient(circle at 40% 35%, #d01e34, #8e0f20 70%);
  box-shadow:
    14px -8px 0 -6px #8e0f20,
    -12px 10px 0 -5px #b3202f;
  animation: pop2 0.14s ease-out both;
}
.rr .rsplat::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 70%;
  width: 6px;
  height: 0;
  border-radius: 0 0 4px 4px;
  background: #8e0f20;
  animation: rdrip 2.4s ease-in 0.2s forwards;
}
.rr .rpool {
  position: absolute;
  left: 44px;
  bottom: -12px;
  width: 250px;
  height: 30px;
  margin-left: -125px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #b3202f, #6e0a18 75%);
  border: 2.5px solid #3a0308;
  transform: scale(0);
  animation: rpool 2.4s ease-out 1.1s forwards;
}
@keyframes rfl {
  0% {
    background: #fff;
    opacity: 0.95;
  }
  35% {
    background: #e0243a;
    opacity: 0.6;
  }
  100% {
    background: #8e0f20;
    opacity: 0;
  }
}
@keyframes rdrip {
  to {
    height: var(--dh);
  }
}
@keyframes rpool {
  to {
    transform: scale(1);
  }
}
.rr .rmsg {
  min-height: 20px;
  margin-top: 8px;
  font-weight: 800;
  color: #fff;
}
