@import 'base.css';

main {
   background-image: url("/images/webp/background/BG-1366x768.webp");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   height: 100dvh;
   overflow-y: scroll;
}

.menu-content {
   width: 90%;
   height: 100%;
   display: flex;
   justify-content: space-evenly;
   align-items: start;
   margin: 0 auto;
   gap: 16px;
   padding: 24px;
   /* border: 1px solid black; */
}

section {
   width: 50%;
   height: 100%;
}

section > div {
   min-height: 100px;
   border: 4px solid black;
   border-radius: 24px;
   background-color: #ffffff8f;
   padding: 8px;
}

.menu-content-1 > div {
   margin-bottom: 12px;
}

.sub-headers {
   font-size: 1.2em;
   font-weight: 900;
}

#game-characters {
   height: 100%;
}

#game-characters-mobile {
   display: none;
}


#game-characters .sub-headers {
   font-size: 1.5em;
}

#user-score-gameplay {
   font-size: 1.2em;
}

/* ************************************************************************* */
.user-info-display {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 8px;
   /* border: 1px solid black; */
}

.user-info-display svg {
   width: 72px;
}

.user-info-profile {
   display: flex;
   align-items: center;
   gap: 12px;
}

.user-info-profile img {
   width: 96px;
   height: 96px;
   border-radius: 50%;
   box-shadow: 0 2px 2px .5px black;
}

.user-info-profile span {
   font-size: 3em;
   font-weight: 900;
}

/* ************************************************************************* */





/* ************************************************************************* */
.character-choosed {
   padding: 8px;
   border: 1px solid black;
}

.character-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

.character-info__displayed {
   display: flex;
   align-items: center;
   gap: 12px;
}
.character-info__displayed span {
   font-size: 1.5em;
   font-weight: 900;
}

.character-info img {
   width: 72px;
   height:  72px;
   border-radius: 50%;
   box-shadow: 0 2px 2px 1px black;
}

.spec{
   display: flex;
   position: absolute;
   top: -10px;
   left: 40px;
   gap: 32px;
}

.crown {
   transform: skewX(-20deg);
}

.edition {
   display: flex;
   align-items: center;
   font-style: italic;
   color: #A87E00;
   margin-left: -24px;
   width: fit-content;
}

.edition span {
   padding-bottom: 18px;
}
#characters-list, #characters-list-mobile {
   margin-top: 24px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
}

#characters-list img, #characters-list-mobile img{
   width: 96px;
   height:  96px;
   border-radius: 50%;
   box-shadow: 0 2px 2px 1px black;
}

#used-btn,
#in-use-btn,
#used-btn-mobile,
#in-use-btn-mobile,
#sync-score
{
   font-size: 1.5em;
   font-weight: 900;
   width: 96px;
   height: 48px;
   border-radius: 12px;
   width: fit-content;
   text-wrap: nowrap;
   padding: 0 .4rem;
}


#btn-stuff {
   display:  flex;
   align-items: center;
   gap: 12px;
}

#btn-stuff a {
   text-decoration: none;
   color: black;
}

#btn-stuff button {
   font-size: 1.5em;
   font-weight: 900;
   height: 48px;
   border-radius: 12px;
}

#used-btn, #used-btn-mobile, #go-to-home {
   background-color: #ead394;
   border: 4px solid #cba715;
}

#in-use-btn, #in-use-btn-mobile, #go-to-game {
   background-color: #B8FD8D;
   border: 4px solid #2A9C07;
}
#sync-score {
   background-color: #8dcbfd;
   border: 4px solid #06588e;
   display: none;
}
#logout-to-game {
   background-color: #fd948d;
   border: 4px solid #b41a1a;
}

#go-to-game {
   display: none;
}

/* ************************************************************************* */


.crown, .edition {
   display: none;
}

#score-needed {
   display: none;
}
@media (max-width: 1280px) {
   .menu-content {
      padding: 16px;
   }

   /* ************************************************************************* */

   .user-info-display svg {
      width: 32px;
   }

   .user-info-profile img {
      width: 56px;
      height: 56px;
   }

   .user-info-profile span {
      font-size: 1.4em;
      font-weight: 900;
   }

/* ************************************************************************* */

   .character-info__displayed span {
      font-size: 1.2em;
   }
}

@media screen and (max-width: 768px) {
   .menu-content {
      padding: 12px;
   }

   section {
      min-width: 100%
   }

   #game-characters {
      display: none;
   }
   
   #game-characters-mobile {
      display: block;
   }
   .character-info__displayed span {
      font-size: 1em;
   }
}

@media screen and (max-width: 480px) {
   .menu-content {
      padding: 8px;
   }

   section {
      min-width: 100%
   }

   section > div {
      border-radius: 12px;
   }

   .sub-headers {
      font-size: .9em;
      font-weight: 600;
   }

   #game-characters {
      display: none;
   }
   
   #game-characters-mobile {
      display: block;
   }

   
   /* ************************************************************************* */

      .user-info-display svg {
         width: 32px;
      }

      .user-info-profile img {
         width: 40px;
         height: 40px;
         border-radius: 50%;
      }

      .user-info-profile span {
         font-size: 1.2em;
         font-weight: 900;
      }

   /* ************************************************************************* */

   .character-info {
      flex-direction: column;
      gap: 12px;
   }

   #characters-list img, #characters-list-mobile img{
      width: 56px;
      height: 56px;
      border-radius: 50%;
      box-shadow: 0 2px 2px 1px black;
   }
   .character-info__displayed span {
      font-size: .9em;
   }

   .spec{
      left: 86px;
   }
   
}


@media screen and (max-width: 380px) {
   .spec{
      left: 56px;
   }
}