#endscreen-holder {
  font-family: Arial;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 300ms; }
  #endscreen-holder.hidden {
    opacity: 0;
    pointer-events: none; }
  #endscreen-holder .endscreen {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1155px;
    height: 568px;
    border: 5px solid #fff;
    background: url("../../images/endscreen/background.png");
    transform: translate(-50%, -50%);
    overflow: hidden; }
    #endscreen-holder .endscreen .x-wing {
      position: absolute;
      background: url("../../images/endscreen/x-wing.png");
      width: 230px;
      height: 120px;
      transform: translate(-1000px, -100px); }
      #endscreen-holder .endscreen .x-wing.fly {
        animation-name: xwing;
        animation-duration: 3000ms;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards; }
      #endscreen-holder .endscreen .x-wing#x-wing-1 {
        bottom: 160px;
        left: -120px;
        z-index: 13;
        animation-delay: 0ms; }
      #endscreen-holder .endscreen .x-wing#x-wing-2 {
        bottom: 240px;
        left: 20px;
        z-index: 12;
        animation-delay: 750ms; }
      #endscreen-holder .endscreen .x-wing#x-wing-3 {
        bottom: 310px;
        left: 160px;
        z-index: 11;
        animation-delay: 1500ms; }
      #endscreen-holder .endscreen .x-wing#x-wing-4 {
        bottom: 380px;
        left: 300px;
        z-index: 10;
        animation-delay: 2250ms; }
    #endscreen-holder .endscreen .count-up-number {
      position: absolute;
      color: #FFF59B;
      font-weight: bold;
      font-size: 17px;
      transform: rotate(-32deg) translate(-50%, -50%);
      display: inline-block;
      text-align: center;
      width: 50px; }
      #endscreen-holder .endscreen .count-up-number#number-1 {
        bottom: 13%;
        left: 32.5%; }
      #endscreen-holder .endscreen .count-up-number#number-2 {
        bottom: 29.5%;
        left: 43.5%; }
      #endscreen-holder .endscreen .count-up-number#number-3 {
        bottom: 43%;
        left: 52.5%; }
      #endscreen-holder .endscreen .count-up-number#number-4 {
        bottom: 57.5%;
        left: 62.5%; }
    #endscreen-holder .endscreen .chart-holder {
      height: 200px;
      width: 100px; }
      #endscreen-holder .endscreen .chart-holder .chart {
        position: absolute; }
        #endscreen-holder .endscreen .chart-holder .chart#chart-1 {
          top: 50%;
          left: 75%;
          transform: translate(-50%, -50%) skewY(-10deg); }
        #endscreen-holder .endscreen .chart-holder .chart#chart-2 {
          top: 55%;
          left: 91%;
          transform: translate(-50%, -50%) skewY(20deg); }
  #endscreen-holder .speech {
    position: absolute;
    background: url("../../images/endscreen/speech.png");
    height: 66px;
    width: 79px;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 300ms;
    text-align: center;
    padding-top: 16px;
    pointer-events: none;
    font-size: 12px; }
    #endscreen-holder .speech#speech-1 {
      top: 60%;
      left: 62%; }
    #endscreen-holder .speech#speech-2 {
      top: 54%;
      left: 77%; }
    #endscreen-holder .speech.show {
      opacity: 1; }

@keyframes xwing {
  0% {
    transform: translate(-1000px, -150px); }
  75% {
    transform: translate(0, -50px); }
  80% {
    transform: translate(0, -50px); }
  100% {
    transform: translate(0, 0); } }

#final-score {
  background-color: #000;
  color: #fdeb31;
  text-align: center;
  position: absolute;
  left: 30px;
  top: 30px;
  padding: 10px 20px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 300ms; }
  #final-score span {
    display: block; }
  #final-score #score {
    font-size: 40px; }
  #final-score.show {
    opacity: 1; }

#restart-button {
  position: absolute;
  left: 50%;
  bottom: 20;
  transform: translateX(-50%);
  border-radius: 10px;
  border: 2px solid #fdeb31;
  color: #fdeb31;
  background-color: #000;
  text-align: center;
  vertical-align: middle;
  font-size: 40px;
  font-family: OCR-New;
  padding: 10px 60px;
  opacity: 0;
  transition: opacity 300ms; }
  #restart-button:hover {
    cursor: pointer; }
  #restart-button.show {
    opacity: 1; }
  #restart-button:active {
    filter: brightness(75%); }

#chart-2 {
  vertical-align: bottom; }
  #chart-2 .bar {
    width: 5px;
    margin-left: 5px;
    background-color: green;
    height: 0;
    display: inline-block;
    transition: height 300ms; }