.gameover-root
{
  width: 100%;
  height: 100%;
  background-color: rgba(black, 0.8);
  backdrop-filter: blur(40px);
  pointer-events: none;
  opacity: 0;
}

.open
{
  transition: all 0.5s ease-out;
  pointer-events: all;
  opacity: 1;
}

.top-banner
{
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: 10px 50px;

  background-color: rgba(black, 0.8);

  font-family: Poppins;
  font-weight: bold;
  font-style: italic;
  font-size: 48px;
  color: white;
  text-shadow: 2px 2px black;
  
  .banner-image
  {
    margin-left: auto;
    width: 320px;
    height: 100%;
  }
}

.bottom-banner
{
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: 10px 50px;

  font-family: Poppins;
  font-weight: bold;
  font-style: italic;
  font-size: 32px;
  color: white;
  text-shadow: 2px 2px black;
  
  background-color: rgba(black, 0.8);
  
  .buttons
  {
    margin-left: auto;
    font-style: normal;
  }
  
}

.content
{
  position: absolute;
  top: 10%;
  width: 100%;
  height: 80%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  
  font-family: Poppins;
  font-size: 32px;
  color: white;
  text-shadow: 2px 2px black;
  
  .medal
  {
    font-size: 96px;
  }
  
  .medal-text
  {
    font-weight: bold;
    font-size: 48px;
  }
  
  .all-round-results
  {
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    
    margin-bottom: 50px;
  }
  
  .canvas
  {
    flex-direction: column;
    flex-wrap: wrap;
    height: 50%;
    
    font-size: 24px;
    color: white;
            
    .entry
    {
      height: 50px;
      width: 300px;
      align-items: center;
      margin: 5px;
      padding: 0 10px;
      
      text-shadow: 2px 2px black;
      background-color: rgba(black, 0.6);

      > .name
      {
        flex-grow: 1;

        &.me
        {
          color: #b6ff00;
        }
      }

      > .place
      {
        width: 40px;
        text-align: left;
        text-shadow: 0 0 black;
      }
      
      > .fire
      {
        z-index: 99;
        position: absolute;
        right: 48px;
        bottom: 0;

        font-size: 48px;
        text-shadow: 0 0 black;

        > .streak
        {
          z-index: 100;
          position: absolute;
          width: 100%;
          bottom: 4px;

          font-size: 24px;
          text-stroke: 5px #000;
          text-align: center;
        }
      }
            
      > .medal
      {
        font-size: 32px;
        text-shadow: 0 0 white;
      }
      
      > .points
      {
        margin-left: auto;
        font-size: 28px;
        font-weight: bold;
      }

      &.gold
      {
        background-color: rgba(#ffd700, 0.6);
      }

      &.silver
      {
        background-color: rgba(#c0c0c0, 0.8);
      }

      &.bronze
      {
        background-color: rgba(#cd7f32, 0.8);
      }
    }
    
  }
  
}

RoundResultEntry
{
  font-size: 24px;
  color: white;
  text-shadow: 0 0 white;
}