body
{
   display: flex;
   flex: 0, 0, auto;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   width: 100vw;
   padding-bottom: 10%;
   font-family: 'Architects Daughter', cursive;
   background: center no-repeat url('../img/torben-gettermann-apGSh2ELiM0-unsplash.jpg');
   background-size: auto 200vh;

   header
   {
      height: 100px;
   }

   .game-area
   {
      position: relative;
      top: 100px;
      width: 50vw;
      height: 50vw;
      max-width: 75vh;
      max-height: 75vh;
      padding: 1rem;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, .95);
      display: flex;
      justify-content: center;
      align-items: center;

      > *
      {
         position: absolute;
         display: none;
         justify-content: center;
         align-items: center;
         width: 100%;
         height: 100%;
      }

      .configuration
      {
         flex-wrap: nowrap;
         flex-direction: row;

         .board-config
         {
            display: flex;
            justify-self: center;
            align-items: center;
            flex-direction: column;

            .row-cols
            {
               display: flex;
            }

            .config-row-col
            {
               display: flex;
               flex-direction: column;
               padding: 1rem;
               margin: .5rem;
               border-radius: 5px;

               input
               {
                  margin: .5rem;
                  background-color: transparent;
                  text-align: center;
                  border: none;
                  border-bottom: 2px solid black;
                  outline: none;
                  font-size: 1.2rem;
                  text-transform: uppercase;
               }
            }
            .range-dots
            {
               display: flex;
               justify-content: center;
               align-items: center;
               margin-top: .5rem;

               .dot 
               {
                  width: 10px;
                  height: 10px;
                  background-color: lightgray;
                  border-radius: 50%;
                  margin: 0 .2rem;
                  cursor: pointer;

                  &.alwaysSelected
                  {
                     cursor: default;
                     background-color: black;
                  }
                  
                  &:hover
                  {
                     background-color: black;
                  }
                  
                  &.selected
                  {
                     background-color: black;
                     &:hover
                     {
                        background-color: lightgray;
                     }
                  }
               }
            }
         }

         .next-btn
         {
            margin-top: 1rem;
            border-radius: 50px;
            background-color: lightblue;
            cursor: pointer;
         }
      }

      .game-info
      {
         flex-direction: column;
         justify-content: space-evenly;
         align-items: center;

         .players
         {
            display: flex;
            flex-direction: column;

            .alert-player
            {
               display: none;
            }

            .players-list
            {
               padding: 0;

               li
               {
                  position: relative;
                  display: flex;
                  align-items: center;
                  font-size: 1.1rem;
                  cursor: pointer;
                  padding: .3rem;
                  
                  &:nth-child(n+2)
                  {
                     border-top: 1px solid lightgray;
                     margin-top: .5rem;
                  }

                  .player-row
                  {
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
                     text-align: center;
                     width: 100%;

                     .player-avatar
                     {
                        width: 3rem;
                        height: 3rem;
                        margin-right: 1rem;
                        cursor: pointer;
                     }
   

                     .remove-player-btn
                     {
                        right: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 2rem;
                        height: 1.3rem;
   
                        & ::after
                        {
                           content: 'x';
                           position: absolute;
                           left: 0;
                           display: flex;
                           justify-content: center;
                           align-items: center;
                           width: .8rem;
                           height: .8rem;
                           color: white;
                           background-color: red;
                           font-size: 0.9rem;
                           border-radius: 50%;
                           margin: 0 .5rem;
                           visibility: hidden;
                           opacity: 0;
                        }
                     }

                     
                     /* & :hover
                     {
                        .remove-player-btn::after
                        {
                           visibility: visible;
                           opacity: 1;
                        }
                     } */
                  }
               }
            }
         }

         .start-game
         {
            margin-top: 1rem;;
            padding: .5rem;
            border-radius: 50px;
            background-color: yellowgreen;
         }
      }

      .board-area
      {
         .board
         {
            display: grid;
            height: 100%;
            width: 100%;

            .board-case
            {
               display: flex;
               justify-content: center;
               align-items: center;
               position: relative;
               width: 100%;
               height: 100%;
               border: 1px solid black;
               cursor: pointer;
            }
         }

         & .lock
         {
            &:after
            {
               content: '';
               position: absolute;
               z-index: 1;
               top: 0;
               left: 0;
            }
         }
      }

      .endgame-popup
      {
         background-color: rgba(255, 255, 255, .95);
         box-shadow: 0 0 10px rgba(0, 0, 0, .5);
         flex-direction: column;
         justify-content: space-evenly;

         p
         {
            font-size: 2rem;
            margin: 1rem;
         }

         button
         {
            cursor: pointer;
            padding: .5rem;
         }
      }
   }
}

/* optionnal classes */
.hide
{
   display: none !important;
}

.show
{
   display: flex !important;
}