:root {
  --pl-rot: rotate(0deg);
  --pl-color: black;
  --pl-score: '0';
  --bg-color: white;
}
html {
  background:
    #222;
  overflow: hidden;
}

html,
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;  
}

#game_console {
  width: 100%;
  height: 100vh;
  aspect-ratio: 9 / 16;
  background:
    linear-gradient(to bottom, purple, orangered),
    #333;
  position: relative;
  box-shadow:
    0 0 50px black,
    0 0 150px black;
  overflow: hidden;
}

#start_screen {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, purple, orangered);
  outline-offset: -20px;
  outline: 3px solid white;
  z-index: 1000;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-family: sans-serif;
  color: white;
  user-select: none;
  transition: 1s;
}

.game_on {
  opacity: 0;
  pointer-events: none;
}

#player {
  width: 100px;
  height: 100px;
  border-radius: 5px;
/*   background: black; */
  position: absolute;
  left: calc(50% - 50px);
  top: calc(25% - 100px);
}
#player:after {
  content: var(--pl-score);
  font-size: 16px;
  color: black;
  text-align: center;
  line-height: 200%;
  font-family: sans-serif;
  width: inherit;
  height: inherit;
  border-radius: 10px;
  background: url('../img/cute-face-design-vector-kawaii-design-smiling-face-illustration-cartoon-style-cute-face-design-vector-kawaii-design-167474986.jpg');
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left 0;
  transform: var(--pl-rot);
  transition: .25s;
}

.deathBar {
  width: 200%;
  height: 5%;
/*   background: red; */
  position: absolute;
  transform: translateX(-25%);
  top: -5%;
  opacity: .75;
}

.deathbar_inside.bartop {
  width: 100%;
  height: 5%;
  background:
    linear-gradient(to right, transparent 50%, rgba(0,0,0,.25) 50%),
    var(--bg-color);
  background-size: 10% 100%;
  position: absolute;
  left: 0;
  clip-path: polygon(0% 100%, 5% 25%, 10% 100%, 15% 25%, 20% 100%, 25% 25%, 30% 100%, 35% 25%, 40% 100%, 45% 25%, 50% 100%, 55% 25%, 60% 100%, 65% 25%, 70% 100%, 75% 25%, 80% 100%, 85% 25%, 90% 100%, 95% 25%, 100% 100%, 100% 0%, 0% 0%);
  z-index: 2;
  opacity: .75;
}
.deathbar_inside.bartop.barbottom {
  bottom: -1px;
  transform: scaleY(-1);
}

.deathbar_inside.barleft {
  width: 37.5%;
  height: 100%;
  background: var(--bg-color);
  float: left;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}
.deathbar_inside.barright {
  width: 37.5%;
  height: 100%;
  background: var(--bg-color);
  float: right;
  clip-path: polygon(0% 50%, 10% 0%, 100% 0%, 100% 100%, 10% 100%);
}

.crunch .deathbar_inside.barleft {
  width: 35%;
  animation: crunch1 2s ease-in infinite;
}
@keyframes crunch1 {
  50% { margin-left: 15%; }
}
.crunch .deathbar_inside.barright {
  width: 35%;
  animation: crunch2 2s ease-in infinite;
}
@keyframes crunch2 {
  50% { margin-right: 15%; }
}

.sweep {
  animation: sweep 2s linear infinite;
}
@keyframes sweep {
  25% { transform: translateX(-15%) ; }
  75% { transform: translateX(-35%) ; }
}