/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}



code {
  color: #E01A76;
}

.btn-primary {
  color: #ddd;
  background-color: #1b6ec2;
  border-color: #1861ac;
}


.mainpage {
  min-height: 100vh;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  /* background-image: url("./assets/login/Login_screen_bg.jpg"); */
  background-position: center;
  background-size: cover;
  color: #ddd;

}

.maincontent {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* width: 960px; */
  flex-grow: 1;
  background-image: url(/c1a7d6b714bdbd49102b.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  min-height: calc(100vh - 50px);
  /* Account for footer */
}



Input {
  background-color: rgb(9, 12, 16);
  border: black;
  border-radius: 2PX;
  border-width: 1px;
  border-style: solid;
  color: rgb(147, 147, 147);
  margin: 5px 0 5px 0;
  min-height: 20px;
  padding: 1px 0 0 5px;


}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  color: whitesmoke;
}

input::placeholder {
  color: lightgray;
  /* font-family: 'Dante', sans-serif; */
  font-family: "Luckiest Guy", serif;
  /* replace with desired color value */
}



.RedButton {
  display: flex;
  border-image: url(/5c9e1bc81724b8d64260.png);
  border-style: solid;
  border-width: 5px;
  /* border-radius: 2px; */
  border-image-slice: 8 fill;
  min-height: 10px;
  min-width: 50px;
  color: whitesmoke;
  font-family: "Luckiest Guy", serif;
  font-size: 18px;
  text-align: center;
  padding: 4px 10px 0px 10px;
  margin: 0 10% 0 10%;
  justify-content: center;
  align-items: center;
  cursor: pointer;

}

.RedButton:hover {
  color: var(--purple);
}

.GreyButton {
  display: flex;
  border-image: url(/1c4a00341ecc93ca43fe.png);
  border-style: solid;
  border-width: 5px;
  /* border-radius: 2px; */
  border-image-slice: 8 fill;
  min-height: 10px;
  min-width: 50px;
  color: whitesmoke;
  font-family: "Luckiest Guy", serif;
  font-size: 18px;
  text-align: center;
  padding: 4px 10px 0px 10px;
  margin: 0 10% 0 10%;
  justify-content: center;
  align-items: center;

}

.YellowButton {
  display: flex;
  border-image: url(/ebd81102e40c5369c22e.png);
  border-style: solid;
  border-width: 5px;
  /* border-radius: 2px; */
  border-image-slice: 6 fill;
  min-height: 10px;
  min-width: 50px;
  color: whitesmoke;
  font-family: "Luckiest Guy", serif;
  font-size: 18px;
  text-align: center;
  padding: 4px 10px 0px 10px;
  /* margin: 0 10% 0 10%; */
  justify-content: center;
  align-items: center;
  transition: transform 0.1s;

}

.YellowButton:hover {

  transform: scale(1.05);
  color: red;
}

.YellowButton.active {
  /* border-image: url("./assets/Buttons/Button_Yellow_32x32.png"); */
  transform: scale(1.05);
  color: #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

.PurpleButton {
  display: flex;
  border-image: url(/37f418415266d0441116.png);
  border-style: solid;
  border-width: 4px;
  background: rgba(0, 0, 0, 0);
  /* border-radius: 2px; */
  border-image-slice: 6 fill;
  min-height: 10px;
  min-width: 50px;
  color: whitesmoke;
  font-family: "Luckiest Guy", serif;
  font-size: 18px;
  text-align: center;
  padding: 4px 10px 0px 10px;
  /* margin: 0 10% 0 10%; */
  justify-content: center;
  align-items: center;
  transition: transform 0.1s;

}

.PurpleButton:hover {

  transform: scale(1.05);
  color: red;
}


.BlueButton {
  display: flex;
  border-image: url(/37f418415266d0441116.png);
  border-style: solid;
  border-width: 5px;
  /* border-radius: 2px; */
  border-image-slice: 6 fill;
  min-height: 10px;
  min-width: 50px;
  color: whitesmoke;
  font-family: "Luckiest Guy", serif;
  font-size: 18px;
  text-align: center;
  padding: 4px 10px 0px 10px;
  /* margin: 0 10% 0 10%; */
  justify-content: center;
  align-items: center;
  transition: transform 0.1s;

}

.ButtonDeactive {
  color: #aaa;
  /* Mute the text color */
  cursor: not-allowed;
  /* Show a 'not-allowed' cursor */
  background-color: #e0e0e0;
  /* Mute the background color */
  /* border: 1px solid #d0d0d0; */
  /* Optional: add a muted border */
  opacity: 0.75;
  /* Overall dim the button */
  pointer-events: none;
  /* Prevents click events */
}




Form {
  display: flex;
  flex-direction: column;
  padding: 0 20% 0 20%;
  gap: 0px;


}

.spacer {
  display: flex;
  flex-grow: 1;
}

.spacer20 {
  height: 20px;
}

.spacer50 {
  height: 50px;
}

.versionumber {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: small;
}


img {
  pointer-events: none;
}


.flexRow {
  display: flex;
  flex-direction: row;

}

.centerCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  display: flex;
  position: relative;
  min-height: 50px;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

/* Mobile footer optimizations */
@media only screen and (max-width: 768px) {
  .footer {
    min-height: 40px;
    font-size: 0.9em;
  }

  .versionumber {
    font-size: x-small;
  }
}

@media only screen and (max-width: 480px) {
  .footer {
    min-height: 35px;
    font-size: 0.8em;
  }

  .versionumber {
    font-size: xx-small;
  }
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gamehome {
    display: flex;
    /* width: 100vw; */


    /* background-image: url("../assets/Background.jpg");
    background-position: top;
    background-size: cover;
    background-attachment: fixed; */
    flex-grow: 1;
}




@media only screen and (min-width: 700px) {
    .gamehomecontent {
        display: flex;
        width: 100%;
        max-width: 884px;
        flex-direction: column;
        /* justify-content: flex-start; */
        /* align-items: center; */
        margin-left: auto;
        margin-right: auto;

        /* background-color: black; */

    }

    .gamecontent {
        display: flex;
        flex-direction: row;
        /* width: 100%; */
        flex-grow: 1;



    }


    .ClubHeader {
        margin: 20px 10px 0 10px;
        display: flex;
        flex-direction: row;

        min-height: 150px;
        width: 100%;
        position: relative;
    }

    .ClubHeader h1 {
        display: flex;

        font-weight: bold;
        text-transform: uppercase;
        margin: 2px;
        padding: 0px;


    }

    .ClubHeader p {
        display: flex;
        padding: 0;
        margin: 0px;
        margin-left: 2px;


    }

    .ClubHeader .shopLogo {
        width: 400px !important;
        left: 470px !important;
        background-size: contain !important;
        top: -20px;
        /* min-width: 250px; */
        /* height: 250px; */
        min-width: 250px;
        /* height: 160px; */
        height: 190px;
        /* width: 560px; */
        position: absolute;
        /* right: 0px; */
        /* left: 330px; */
        /* background-size: cover; */
        z-index: 0;
        display: flex;
        flex-direction: column-reverse;
    }

    .ClubHeaderDescription {
        position: relative;
        display: flex;
        margin-left: 40px;
        margin-right: 40px;
        width: 500px;

        flex-direction: column;
        background-image: url(/c69602da2e27ce5fede8.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;

        h1 {
            position: absolute;
            top: 20px;
            left: 90px
        }
    }

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

        margin: 50px 10px 10px 60px;
        font-size: 15px;

    }

}

@media only screen and (max-width: 700px) {
    .gamehomecontent {
        width: 100vw;
        margin-left: auto;
        margin-right: auto;
    }

    .ClubHeader {
        margin: 0px 10px 0 10px;
        display: flex;
        flex-direction: column;
        min-height: 150px;
        position: relative;
    }

    .ClubHeader .shopLogo {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 150px;
        background-size: cover;
        background-position: center;
        z-index: 1;
    }

    .ClubHeaderDescription {
        position: relative;
        z-index: 2;
        margin-top: 100px;
        padding: 15px;
        background: rgba(0, 0, 0, 0.75);
        border-radius: 8px;
        margin: 120px 15px 15px 15px;
    }

    .ClubHeaderDescription h1 {
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        margin: 0 0 10px 0;
        font-size: 1.5rem;
    }

    .ClubHeaderDescription p {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        margin: 5px 0;
        line-height: 1.4;
    }
}
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
  /* background-color: black; */

  /* background-image: url("../assets/login/Background_Login.jpg");
  background-position: center;
  background-size: cover; */

  align-items: center;
  justify-content: space-between;
  min-height: calc(100vh - 80px);
  /* Account for footer */
  padding: 20px 0;
  box-sizing: border-box;
}

.topImageContainer {
  display: flex;
  position: relative;
  max-width: 800px;
  min-width: 350px;
  width: 100%;
  height: clamp(350px, 50vh, 600px);
  /* Maximum possible height for prominence */
  margin: 0 auto;
  /* Center the image on larger screens */
}

.topImageContainer a {
  display: flex;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.topImage {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 100%;

  background-image: url(/b99a88f4f4cdabe50577.png);
  background-position: center;
  background-size: contain;

  margin: -160px auto -200px auto;
  background-repeat: no-repeat;
  /* Add the fade-out effect */

  -webkit-mask-image: linear-gradient(to right, transparent, black 50%, transparent);

          mask-image: linear-gradient(to right, transparent, black 50%, transparent);
}

.playNowContainer {

  display: flex;
  flex-direction: column;
  margin-top: clamp(10px, 2vh, 30px);
  margin-bottom: clamp(5px, 1vh, 20px);
  /* margin: auto;
  z-index: 1; */
  width: 300px;
  min-height: 100px;
  /* margin-bottom: 200px; */
  text-align: center;
  position: relative;
  color: #ddd;
  /* font-family: 'Dante'; */
  font-family: "Luckiest Guy", serif;

  font-size: clamp(1.8em, 4vw, 2.5em);

  text-shadow: 2px 2px 2px black,
    2px -2px 2px black,
    -2px 2px 2px black,
    -2px -2px 2px black;

}

.playNowContainer a {
  display: inline-block;
  margin: 10px 5px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--purple), #9933cc);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.8em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.playNowContainer a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #bb33ff, var(--purple));
  color: white;
}



.playNowContainer h1 {
  font-size: clamp(1.2em, 3vw, 1.5em);
  margin: 10px 0;
}

.socialFooterHomeLocation {
  margin-top: clamp(10px, 2vh, 30px);
}

.countdown {
  color: whitesmoke;
  text-align: center;
  font-family: 'Dante', sans-serif;
  font-weight: lighter;
  font-size: clamp(30px, 8vw, 60px);
  color: var(--purple);
  text-transform: uppercase;

  text-shadow: 2px 2px 2px black,
    2px -2px 2px black,
    -2px 2px 2px black,
    -2px -2px 2px black;
}

/* Mobile optimizations */
@media only screen and (max-width: 768px) {
  .home {
    padding: 5px 0;
    min-height: calc(100vh - 60px);
  }

  .topImageContainer {
    height: clamp(250px, 45vh, 450px);
    max-width: 600px;
    min-width: 300px;
  }

  .topImage {
    margin: -120px auto -150px auto;
  }

  .playNowContainer {
    width: 280px;
    margin-top: clamp(5px, 1vh, 25px);
    margin-bottom: clamp(3px, 1vh, 15px);
    font-size: clamp(1.5em, 5vw, 2.2em);
  }

  .playNowContainer a {
    padding: 10px 20px;
    font-size: 0.7em;
    margin: 8px 3px;
  }

  .countdown {
    font-size: clamp(20px, 6vw, 45px);
  }

  .socialFooterHomeLocation {
    margin-top: clamp(5px, 1vh, 25px);
  }
}

@media only screen and (max-width: 480px) {
  .home {
    padding: 3px 0;
  }

  .topImageContainer {
    height: clamp(180px, 40vh, 350px);
    max-width: 450px;
    min-width: 250px;
  }

  .topImage {
    margin: -100px auto -120px auto;
  }

  .playNowContainer {
    width: 250px;
    margin-top: clamp(3px, 1vh, 20px);
    margin-bottom: clamp(2px, 1vh, 10px);
    font-size: clamp(1.3em, 4vw, 2em);
  }

  .playNowContainer a {
    padding: 8px 16px;
    font-size: 0.6em;
    margin: 6px 2px;
    border-radius: 6px;
  }

  .countdown {
    font-size: clamp(16px, 5vw, 35px);
  }

  .socialFooterHomeLocation {
    margin-top: clamp(3px, 1vh, 20px);
  }
}

/* Extra small screens and short screens */
@media only screen and (max-height: 600px) {
  .home {
    min-height: calc(100vh - 40px);
    padding: 5px 0;
  }

  .topImageContainer {
    height: clamp(120px, 20vh, 250px);
  }

  .topImage {
    margin: -80px auto -100px auto;
  }

  .playNowContainer {
    margin-top: clamp(5px, 1vh, 20px);
    margin-bottom: clamp(5px, 1vh, 10px);
    font-size: clamp(1.2em, 3vw, 1.8em);
  }

  .playNowContainer a {
    padding: 6px 12px;
    font-size: 0.5em;
    margin: 4px 1px;
    border-radius: 4px;
  }

  .countdown {
    font-size: clamp(14px, 4vw, 30px);
  }

  .socialFooterHomeLocation {
    margin-top: clamp(5px, 1vh, 20px);
  }
}
.socialFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1em;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.socialMedia {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.support {
  display: flex;
  flex-direction: row;
}

.socialIconName {
  display: flex;
  padding: 3px;

}

.socialIcon {
  margin-right: 5px;
  height: clamp(18px, 4vw, 24px);
  width: clamp(18px, 4vw, 24px);
  transition: transform 0.2s ease;
}

.socialIcon:hover {
  transform: scale(1.1);
}

/* Mobile optimizations for social footer */
@media only screen and (max-width: 768px) {
  .socialIcon {
    height: clamp(16px, 3vw, 20px);
    width: clamp(16px, 3vw, 20px);
  }

  .socialIconName {
    padding: 2px;
  }
}

@media only screen and (max-width: 480px) {
  .socialMedia {
    gap: 3px;
  }

  .socialIconName {
    padding: 1px;
  }

  .socialIcon {
    height: clamp(14px, 3vw, 18px);
    width: clamp(14px, 3vw, 18px);
    margin-right: 3px;
  }
}
/* CSS Modules - alle Klassen sind automatisch scoped */
.loginPage__JPT05A7K {
  display: flex;
  flex-direction: column;
  width: 100%;

  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  background-image: url(/c1a7d6b714bdbd49102b.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: 20px 0;
  box-sizing: border-box;
}

.topImage__E42OsYKr {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 600px;
  min-width: 300px;
  height: clamp(200px, 30vh, 350px);
  margin: -80px auto 0 auto;
  background-image: url(/b99a88f4f4cdabe50577.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, black 50%, transparent);
          mask-image: linear-gradient(to right, transparent, black 50%, transparent);
}

.loginContainer__NKkmaJjL {
  display: flex;
  flex-direction: column;
  z-index: 1;
  width: clamp(280px, 80vw, 400px);
  min-height: 200px;
  text-align: center;
  position: relative;
  margin: clamp(10px, 2vh, 30px) auto;
  border-image: url(/6040b3398bf7efa6feb2.png);
  border-style: solid;
  border-width: 50px;
  border-image-slice: 60 fill;
}

.loginContainer__NKkmaJjL h1 {
  color: var(--purple);
  font-family: "Luckiest Guy", serif;
  font-size: clamp(1.5em, 4vw, 2.2em);
  margin: 0 0 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  position: relative;
  top: -75px;
}

.frameBack__TRdP4eoV {
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-top: -70px;
  padding: 0 40px 20px 40px;
  gap: 15px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.message__tR1BnRsa {
  color: #ff6b6b;
  font-family: "Luckiest Guy", serif;
  font-size: 0.9em;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.input__dPhM5fL2 {
  background: rgba(15, 15, 15, 0.8);
  border: 2px solid rgba(153, 0, 255, 0.3);
  border-radius: 8px;
  color: white;
  margin: 2px 0;
  min-height: 20px;
  height: 40px;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: "Luckiest Guy", serif;
  font-size: 1em;
  transition: all 0.3s ease;
}

.input__dPhM5fL2:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 10px rgba(153, 0, 255, 0.3);
  background: rgba(20, 20, 20, 0.9);
}

.input__dPhM5fL2::placeholder {
  color: #aaa;
  font-family: "Luckiest Guy", serif;
}

.form__vtIyVO9b {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  padding: 0;
  margin: 0;
}

.linkForgottPW__wGq_TCWv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 2px 0;
  font-size: 0.8em;
  color: #ddd;
  cursor: pointer;
  font-family: "Luckiest Guy", serif;
  transition: color 0.3s ease;
  text-align: center;
}

.linkForgottPW__wGq_TCWv:hover {
  color: var(--purple);
}

.redButton____cSyBSl {
  display: inline-block;
  margin: 5px 0;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--purple), #9933cc);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1em;
  font-family: "Luckiest Guy", serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  text-align: center;
  width: auto;
}

.redButton____cSyBSl:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #bb33ff, var(--purple));
}

.textSmall__qUBr7KhO {
  font-size: 0.8em;
  color: #ddd;
  font-family: "Luckiest Guy", serif;
  margin: 2px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.passwordInputContainer__uoeKKxE0 {
  position: relative;
  display: flex;
  width: 100%;
  margin: 2px 0;
}

.passwordInputContainer__uoeKKxE0 .input__dPhM5fL2 {
  width: 100%;
  height: 40px;
  padding-right: 45px;
  padding-left: 12px;
  margin: 0;
  box-sizing: border-box;
}

.passwordToggleIcon__OFCip5XW {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  font-size: 16px;
  color: #aaa;
  z-index: 1;
  pointer-events: auto;
  transition: color 0.3s ease;
}

.passwordToggleIcon__OFCip5XW:hover {
  color: var(--purple);
}

/* Mobile optimizations */
@media only screen and (max-width: 768px) {
  .loginPage__JPT05A7K {
    padding: 10px 0;
    min-height: calc(100vh - 60px);
  }

  .topImage__E42OsYKr {
    height: clamp(150px, 25vh, 280px);
    margin: -60px auto 0 auto;
  }

  .loginContainer__NKkmaJjL {
    width: clamp(260px, 85vw, 350px);
    margin: clamp(5px, 1vh, 20px) auto;
  }

  .frameBack__TRdP4eoV {
    margin: 0;
    margin-top: -60px;
    padding: 0 30px 15px 30px;
  }
}

@media only screen and (max-width: 480px) {
  .loginPage__JPT05A7K {
    padding: 5px 0;
  }

  .topImage__E42OsYKr {
    height: clamp(120px, 20vh, 220px);
    margin: -40px auto 0 auto;
  }

  .loginContainer__NKkmaJjL {
    width: clamp(240px, 90vw, 320px);
    margin: clamp(3px, 1vh, 15px) auto;
  }

  .frameBack__TRdP4eoV {
    margin: 0;
    margin-top: -50px;
    padding: 0 25px 10px 25px;
  }

  .input__dPhM5fL2 {
    height: 35px;
    font-size: 0.9em;
  }

  .passwordInputContainer__uoeKKxE0 .input__dPhM5fL2 {
    height: 35px;
  }
}

@media only screen and (max-height: 600px) {
  .loginPage__JPT05A7K {
    padding: 5px 0;
  }

  .topImage__E42OsYKr {
    height: clamp(100px, 15vh, 180px);
    margin: -30px auto 0 auto;
  }

  .loginContainer__NKkmaJjL {
    margin: clamp(2px, 1vh, 10px) auto;
  }

  .frameBack__TRdP4eoV {
    gap: 8px;
    margin: 0;
    margin-top: -40px;
    padding: 0 20px 10px 20px;
  }
}
.loginPage__truGOHGU {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  background-image: url(/c1a7d6b714bdbd49102b.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: 20px 0;
  box-sizing: border-box;
}

.loginTopImage__rGwrgg2R {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 600px;
  min-width: 300px;
  height: clamp(200px, 30vh, 350px);
  margin: -80px auto 0 auto;
  background-image: url(/b99a88f4f4cdabe50577.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, black 50%, transparent);
          mask-image: linear-gradient(to right, transparent, black 50%, transparent);
}

.input__iNZC9WwT {
  background: rgba(15, 15, 15, 0.8);
  border: 2px solid rgba(153, 0, 255, 0.3);
  border-radius: 8px;
  color: white;
  margin: 5px 0;
  min-height: 20px;
  height: 40px;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: "Luckiest Guy", serif;
  font-size: 1em;
  transition: all 0.3s ease;
}

.input__iNZC9WwT:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 10px rgba(153, 0, 255, 0.3);
  background: rgba(20, 20, 20, 0.9);
}

.input__iNZC9WwT::placeholder {
  color: #aaa;
  font-family: "Luckiest Guy", serif;
}

.form__KxjCkhpt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  margin: -50px;
  margin-top: -100px;
  padding: 0;
}

.redButton__eD5CIwIG {
  display: inline-block;
  margin: 10px 0;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--purple), #9933cc);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1em;
  font-family: "Luckiest Guy", serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  text-align: center;
  width: auto;
}

.redButton__eD5CIwIG:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #bb33ff, var(--purple));
}

.loginContainer__FNTzq6i4 {
  display: flex;
  flex-direction: column;
  z-index: 1;
  width: clamp(280px, 80vw, 400px);
  min-height: 200px;
  text-align: center;
  position: relative;
  margin: clamp(10px, 2vh, 30px) auto;
  border-image: url(/6040b3398bf7efa6feb2.png);
  border-style: solid;
  border-width: 50px;
  border-image-slice: 60 fill;
}

.loginContainer__FNTzq6i4 h1 {
  color: var(--purple);
  font-family: "Luckiest Guy", serif;
  font-size: clamp(1.5em, 4vw, 2.2em);
  margin: 0 0 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  position: relative;
  top: -75px;
}

.loginContainer__FNTzq6i4 p {
  color: #ddd;
  font-family: "Luckiest Guy", serif;
  font-size: 0.9em;
  line-height: 1.4;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  padding: 0;
}

.loginContainer__FNTzq6i4 a {
  color: var(--purple);
  text-decoration: none;
  font-weight: bold;
}

.loginContainer__FNTzq6i4 a:hover {
  color: #bb33ff;
}

.frameBack__WDzEd82z {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.passwordInputContainer__GmP6An4o {
  position: relative;
  width: 100%;
}

.passwordToggleIcon__W_lKPudh {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2em;
  -webkit-user-select: none;
          user-select: none;
  z-index: 2;
}

.errorMessage__A93gZjf4 {
  color: #ff6b6b;
  font-family: "Luckiest Guy", serif;
  font-size: 0.9em;
  margin: 5px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.inputGroup__z39bIxy8 {
  width: 100%;
  margin-bottom: 5px;
}

.fieldError__f1Us9Y8w {
  color: #ff6b6b;
  font-family: "Luckiest Guy", serif;
  font-size: 0.75em;
  margin: 2px 0 5px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  text-align: left;
}

.inputError__PkMB8Kkd {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.3) !important;
}

.buttonDisabled__SNqQ5efJ {
  opacity: 0.6;
  cursor: not-allowed !important;
  transform: none !important;
}

.buttonDisabled__SNqQ5efJ:hover {
  transform: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.loginTopImageSmall__Rth7Ub2V {
  position: relative;
  width: auto;
  height: 550px;
}

/* Media Queries */
@media only screen and (max-width: 768px) {
  .loginContainer__FNTzq6i4 {
    width: clamp(260px, 85vw, 350px);
    margin: clamp(5px, 1vh, 20px) auto;
  }

  .form__KxjCkhpt {
    margin: -40px;
    margin-top: -80px;
  }
}

@media only screen and (max-width: 480px) {
  .loginPage__truGOHGU {
    padding: 5px 0;
  }

  .loginTopImage__rGwrgg2R {
    height: clamp(120px, 20vh, 220px);
    margin: -40px auto 0 auto;
  }

  .loginContainer__FNTzq6i4 {
    width: clamp(240px, 90vw, 320px);
    margin: clamp(3px, 1vh, 15px) auto;
  }

  .form__KxjCkhpt {
    margin: -35px;
    margin-top: -70px;
  }

  .input__iNZC9WwT {
    height: 35px;
    font-size: 0.9em;
  }

  .passwordInputContainer__GmP6An4o .input__iNZC9WwT {
    height: 35px;
  }
}

@media only screen and (max-height: 600px) {
  .loginPage__truGOHGU {
    padding: 5px 0;
  }

  .loginTopImage__rGwrgg2R {
    height: clamp(100px, 15vh, 180px);
    margin: -30px auto 0 auto;
  }

  .loginContainer__FNTzq6i4 {
    margin: clamp(2px, 1vh, 10px) auto;
  }

  .form__KxjCkhpt {
    gap: 8px;
    margin: -30px;
    margin-top: -60px;
  }
}
.imprintBody {
  display: flex;
  flex-direction: column;
}

.imprintNav {
  display: flex;
  flex-direction: column;
}

.switchLanguage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 10px 10px 0px 10px;
}

.imprintSwitch {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.topleftBack {
  position: absolute;
  top: 10px;
  left: 10px;
}
.gameEquipment {
    display: flex;
    flex-direction: column;

    margin: 5px 5px 0 0;
}

.basicStats {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    /* padding: 0 15% 0 15%; */

}

.stat {
    display: flex;
    flex-direction: row;
    width: 60px;
    height: 30px;
}

.statValue {
    display: flex;
    flex-direction: row;
    width: 40px;
    height: 30px;
    font-size: 18px;
    margin: 0 0 0 5px;


    align-items: center;
    justify-content: center;
}

.statIcon {
    display: flex;

    width: 30px;
    height: 30px;
    object-fit: cover;



}

.equipmentRow {
    display: flex;
    flex-direction: row;


    justify-content: center;
    align-items: center;

}

.equipmentItem {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 80px;
    height: 80px;
    /* background-color: aqua; */
    margin: 5px;
    background-image: url(/b41de62396e29d1a6629.png);

    align-items: center;
    justify-content: center;


}

.equipmentPet {
    background-image: url(/5471ecd08ee1598240fc.png);

    background-size: cover;
}

.equipmentContract {
    background-image: url(/3341dfbfbcc7d3713442.png);

    background-size: cover;
}

.equipmentCauldron {
    background-image: url(/2d40411e3217fc7015b6.png);

    background-size: cover;
}

.equipmentCamera {
    background-image: url(/286fa157dcfb57e4dbd3.png);

    background-size: cover;
}

.equipmentChronoCrystal {
    background-image: url(/286fa157dcfb57e4dbd3.png);

    background-size: cover;
}

.equipmentRelic {
    background-image: url(/5471ecd08ee1598240fc.png);

    background-size: cover;
}

.equipmentBagpipe {
    background-image: url(/5471ecd08ee1598240fc.png);

    background-size: cover;
}


.equipmentLabel {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}


.rarity {
    display: flex;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 0;
    background-size: contain;
    pointer-events: none;

    border: 2px inset rgba(0, 0, 0, 0);
    border-radius: 2px;

    filter: blur(1px);
    top: -2px;
    left: -2px;
}

/* .rarity_common {
    background-image: url(../../assets/game/inventory/Inventory_Background_Common_128x128.png);
}

.rarity_rare {
    background-image: url(../../assets/game/inventory/Inventory_Background_Rare_128x128.png);
}

.rarity_epic {
    background-image: url(../../assets/game/inventory/Inventory_Background_Epic_128x128.png);
}

.rarity_legendary {
    background-image: url(../../assets/game/inventory/Inventory_Background_Legendary_128x128.png);
}

.rarity_uncommon {
    background-image: url(../../assets/game/inventory/Inventory_Background_Uncommon_128x128.png);
} */

.equipmentImg {
    width: 75px;
    height: 75px;


}

.TrapSetup {
    position: relative;
    margin-top: -100px;
    margin-bottom: -50px;
    pointer-events: none;
}

/* .TrapSetup img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.TrapSetup img:last-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
} */

.equipmentImgMechanism {
    width: 200px;
    height: 200px;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    object-fit: contain;
}

.equipmentImgMagicCicle {
    width: 400px;
    height: 400px;
    object-fit: cover;
}



.equipmentSmallItem {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 60px;
    height: 60px;
    background-color: aqua;
    margin: 5px;
    background-image: url(/b41de62396e29d1a6629.png);
    align-items: center;
    justify-content: center;
}

.equipmentSmallImg {
    width: 55px;
    height: 55px;


}

.raritySmall {
    display: flex;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 0;
    background-size: contain;
    pointer-events: none;
    border: 2px inset rgba(0, 0, 0, 0);
    border-radius: 2px;

    top: -2px;
    left: -2px;
    text-align: center;
    color: lightgrey;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.lock {
    background-image: url(/592f2af3b50a80556745.png);
    background-position: center;
    background-size: contain;
}

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

    justify-content: center;
    align-items: center;
    margin: 5px;
    margin-top: 25px;
}

.setupRow {
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;
    margin: 5px;
    flex-wrap: wrap;
    max-width: 300px;
}

.setupItem {
    width: 40px;
    height: 40px;
    /* background-color: black; */
    margin: 5px;

    display: flex;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(/fa99f36efd2c5e5399eb.png);

    background-size: cover;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.setupItem:hover {
    background-image: url(/7876e187a2fe787cd91f.png);
}

.locked {
    cursor: not-allowed;
    text-decoration: line-through;
    background-image: url(/2bd0f2578f013ae45dfa.png);
    color: transparent;
    text-shadow: none;
}

.active {
    background-image: url(/7876e187a2fe787cd91f.png);
}



.Stats {
    display: flex;
    flex-direction: column;
    margin: 5px;
}

.statsHeader {
    display: flex;
    flex-direction: row;
    color: whitesmoke;
    text-align: center;

    font-family: "Luckiest Guy", serif;
    font-weight: lighter;
    font-size: 20px;
    color: var(--purple);
    text-transform: uppercase;

    text-shadow: 2px 2px 2px black,
        2px -2px 2px black,
        -2px 2px 2px black,
        -2px -2px 2px black;
}

.statsContent {
    display: flex;
    flex-direction: column;
    color: whitesmoke;
    text-align: center;
    font-family: 'Dante', sans-serif;
    font-weight: lighter;
    font-size: 16px;
    width: 100%;

}

.statrow {
    display: flex;
    flex-direction: row;
    /* justify-content: center;
    align-items: center; */
    margin: 5px;


    .statName {
        width: 150px;
        justify-content: flex-start;


    }
}

.collapseButtonLabel {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    margin: 5px;
}
.tooltip-parent-element {
    position: relative;

}

.tooltip {
    position: absolute;
    background-color: #000000;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    min-width: 200px;
    top: 100%;
    left: 50%;
    /* transform: translate(-50%, 0); */
    z-index: 2000;

}

.tooltipAtCursor {
    position: absolute;
    background-color: #000000;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    min-width: 200px;
    top: 10px;
    left: 10px;
    z-index: 3;


}
.img-placeholder {
    background-image: url(/b3f8b0caff52b77e5c54.png);
    background-size: cover;
    background-position: center;

    min-width: 20px;
    min-height: 20px;
}


.controls-toggle {
    position: relative;
    top: -38px;
    left: 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 100;
}

.icon {
    width: 30px;
    height: 30px;
}

.video-controls {
    position: relative;
    top: -260px;
    left: 0;
    height: 200px;
    width: 150px;
    display: flex;
    flex-direction: column;
}

/* .RedButton {
    width: 160px;

    margin: 3px;
} */
.adsterra {
    display: flex;
    justify-content: center;
}
.gamejournal {
    display: flex;
    flex-direction: column;



    flex-grow: 1;
    margin: 5px 0px 0 5px;


}


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


    border-image: url(/6040b3398bf7efa6feb2.png);
    border-style: solid;
    border-width: 50px;
    border-image-slice: 60 fill;

    min-height: 300px;
    padding: 0;

    h1 {
        position: relative;
        top: -75px;
    }

}

.greyedOut {
    opacity: 0.75;

    filter: brightness(0) saturate(100%) invert(0) sepia(0) hue-rotate(0deg) grayscale(1);
}

.journalContents {
    margin: -35px;
}

.lootItem {
    margin-right: 10px;
}

.journal .xpLootImage {
    background-image: url(/f606ea621fd01bdc4e71.png);
    background-position: center;
    background-size: contain;
    width: 30px;
    height: 33px;
}

.enemy-image-container {
    width: 100px;
    height: 100px;
    margin: 5px;
    display: flex;
    position: relative;

    .img {
        width: 100px;
        height: 100px;

    }

    .enemyImage {
        width: 100px;
        height: 100px;

        object-fit: cover;
        position: relative;
        z-index: 10;
    }

    .circle {
        display: flex;
        position: absolute;
        top: 20px;
        left: 10px;
        width: 80px;
        height: 80px;
        background-image: url(/489dc1f46016daa62b44.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .circle_Rainbow {
        background-image: url(/e281953387d0fff76072.png);
    }

    .circle_Gift {
        background-image: url(/281dcd3ed5f8fa00f172.png);
    }

    .circle_Nessy {
        background-image: url(/07c60cd8d0a7d5974555.png);
    }

    .circle_Crystal {
        background-image: url(/3dfec1ab8e79f67646bd.png);
    }

    .circle_Lucky {
        background-image: url(/800bb0c69d24ecbe46e0.png);
    }

    .circle_Monster {
        background-image: url(/bfbf22c67a0058a4c25e.png);
    }

    .circle_Secret {
        background-image: url(/b40e649f84bd03ea122c.png);
    }

    .circle_Special {
        background-image: url(/f439b64f9db30eed4616.png);
    }

    .circle_Enigma {
        background-image: url(/57469f00997e9a9eba5a.png);
    }

    .circle_midnight {
        background-image: url(/07066164cb81148578cf.png);
    }

}



.combat-event {
    display: flex;
    flex-direction: row;

    /* align-items: center; */
    margin: 5px;
    color: whitesmoke;
    font-size: 12px;
}

.result {
    display: flex;
    flex-direction: column;
    margin: 5px;

    color: whitesmoke;
    font-size: 12px;



    .resultheader {
        margin: 0;


        font-weight: lighter;
        font-size: 18px;
        color: var(--purple);
        text-transform: uppercase;

        text-shadow: 2px 2px 2px black,
            2px -2px 2px black,
            -2px 2px 2px black,
            -2px -2px 2px black;
    }

    /* .currencyBody {

        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px;
    } */

    .lootImage {
        width: 30px;

    }

    .lootName {
        font-size: 10px;
        max-width: 60px;
        overflow-wrap: break-word;
    }

    /* .currencyImg {
        width: 20px;
        height: 20px;
    } */



}


.lootJournal {

    display: flex;
    flex-wrap: wrap;

    .currencyEntry {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-content: center;
        padding-right: 0px;
        padding-top: 0px;
    }

    .currencyBody {


        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px;

    }

    .currencyBody img {

        width: 30px;
        height: auto;

    }

    .currencyEntryDescription {
        font-size: 10px;
        color: rgb(160 177 194);
        text-align: center;
        justify-content: start;
        max-width: 65px;
        overflow: hidden;
        padding: 0;

    }


}

.redLine {
    display: flex;


    /* background-image: url("../../assets/game/Redline.png");
     */
    /* background-repeat: no-repeat;
    background-position: center;
    background-size: contain; */
    background: linear-gradient(to right, transparent, var(--purple), transparent);
    width: 100%;
    height: 3px;
}
.currencyBody__lLwgwjBW {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: 6px;
}

.currencyImg__tC7zZRf6 {
    width: 30px;
    height: 30px;
}

.currencyEntry__U7rBi9yB {
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
    align-content: center;
    padding-right: 10px;
    padding-top: 3px;
}

.currencyEntryDescription__TVddspRu {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3px;
    color: azure;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Large screens - Desktop */
@media only screen and (min-width: 550px) {
    .currencyImg__tC7zZRf6 {
        width: 30px;
        height: 30px;
    }

    .currencyEntryDescription__TVddspRu {
        font-size: 0.9rem;
        padding-left: 3px;
    }

    .currencyEntry__U7rBi9yB {
        padding-right: 10px;
    }
}

/* Small screens - Mobile */
@media only screen and (max-width: 549px) {
    .currencyImg__tC7zZRf6 {
        width: 22px;
        height: 22px;
    }

    .currencyEntryDescription__TVddspRu {
        font-size: 0.7rem;
        padding-left: 2px;
    }

    .currencyEntry__U7rBi9yB {
        padding-right: 6px;
        padding-top: 2px;
    }

    .currencyBody__lLwgwjBW {
        margin-bottom: 4px;
    }
}

/* Extra small screens */
@media only screen and (max-width: 400px) {
    .currencyImg__tC7zZRf6 {
        width: 20px;
        height: 20px;
    }

    .currencyEntryDescription__TVddspRu {
        font-size: 0.65rem;
        padding-left: 1px;
    }

    .currencyEntry__U7rBi9yB {
        padding-right: 4px;
        padding-top: 1px;
    }
}
.gameMissions {
    display: flex;
    flex-direction: column;







}

.targetIcon {
    display: flex;
    position: absolute;
    width: 70px;
    height: 70px;
    background-image: url(/a5fa2d1db402e39c28df.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    left: -20px;
    top: -30px;
}

.missions {
    display: flex;
    position: relative;
    flex-direction: column;

    border-image: url(/4b2afd5f7b4e15ba2218.png);
    border-style: solid;
    border-width: 35px;
    border-image-slice: 42 fill;

    min-height: 100px;

    h1 {
        position: relative;
        top: -61px
    }

    p {
        margin: -20px;
    }
}

.missionDescription {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 10px;
    position: relative;
    top: -60px;
    margin-bottom: -60px;

}

.objectives {
    display: flex;
    flex-direction: row;
    margin: 0 10px;
    flex-wrap: wrap;

    h3 {
        margin: 0;
    }

}

.objective {
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    margin-bottom: 30px;
    max-width: 100px;


    h3 {
        margin: 0;
        margin-top: 10px;
        min-height: 57px;
    }

    .enemyImageAndRarityContainer {
        width: 100px;
        height: 100px;
    }

    .enemyImagePlaceholder {
        width: 100px;
        height: 100px;

    }

    .rarity_big {
        width: 100px;
        height: 100px;
    }

    .enemyImage {
        min-width: 100px;
        min-height: 100px;
        width: 100px;
        height: 100px;
    }
}

.missionDetails {
    display: flex;
    flex-direction: column;
    margin: 0 10px;

    .missioncountdown {
        display: flex;
        flex-direction: column;
        margin: 0 10px 0 50px;

    }

}

.missionRewards {
    display: flex;
    flex-direction: row;
    margin: 0 10px;


}
@media only screen and (min-width: 700px) {




    .gamehomeheader {
        display: flex;
        flex-direction: row;
        /* background-color: red; */
        /* height: 100px; */
        width: 884px;
        height: 200px;
        background-image: url(/e03573011cef68b78157.png);
        justify-content: space-between;

        background-size: contain;
        background-repeat: no-repeat;
        z-index: 10;


    }


    .gamehomeheader .dropdown-button {
        display: flex;
        border-image: url(/9216644adbce1b8d0840.png);
        border-style: solid;
        border-width: 4px;

        border-image-slice: 8 fill;
        margin-top: 2px;

        height: 18px;
        /* min-height: 5px;
    max-height: 10px; */
        /* width: 67%; */
        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        /* font-size: 12px; */
        text-align: center;
        top: 4px;


    }

    .gamehomeheader .dropdown-foldout {
        display: flex;
        width: 10px;
        /* background-color: red; */
        /* padding: -4px; */
        margin: -4px;
        border-image: url(/ebd81102e40c5369c22e.png);
        border-style: solid;
        border-width: 9px;
        border-image-slice: 9 fill;

        height: 50%;

    }

    .gamehomeheader .dropdown-menu {
        display: block;
        position: absolute;
        background-color: black;
        min-width: 130px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 10;
    }

    .gamehomeheader .dropdown-menu a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-transform: uppercase;
    }

    .gamehomeheader .dropdown-menu a:hover {
        background-color: rgb(25, 1, 1);
        color: rgb(180, 1, 1);
    }

    .PlayerProfile {
        display: flex;
        flex-direction: row;
        width: 150px;
        margin-right: 20px;
        margin-top: 20px;

        /* background-color: greenyellow; */
        .dropdown-button {
            font-size: 12px;
            align-items: center;

            position: relative;
        }
    }

    .ProfilePicFrame {
        display: flex;
        /* width: 160px;
        height: 200px; */
        /* background-color: greenyellow; */
        /* z-index: 1; */
    }

    .ProfilePic {
        display: flex;
        position: relative;
        margin: 10px 10px 10px 10px;
        flex-grow: 1;
        /* background-color: greenyellow; */
    }

    .ProfileDetails {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-top: 0px;
        width: 180px;
        margin-right: 10px;
        justify-content: space-around;

        .dropdown {
            text-transform: uppercase;
        }

    }

    .gameHeaderrows {
        display: flex;
        flex-direction: column;
        margin-right: 20px;
        flex-grow: 1;
    }

    .gameHeaderColums {

        display: flex;
        /* flex-grow: 1; */
        height: 115px;
        /* justify-content: space-between; */
        flex-direction: row;
        width: 100%;

    }

    .UserName {
        font-size: 18px;
    }

    .UserLevelBackground {
        margin-top: 2px;
        display: flex;
        width: 100%;

        background-color: black;
    }

    .UserLevelTextFont {
        display: flex;
        position: relative;
        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        font-size: 14px;
        text-align: center;
        overflow: visible;
        text-wrap: nowrap;
    }

    .UserLevel {

        display: flex;
        flex-direction: column;
        border-image: url(/1bc9359d21d1fb62387c.png);
        border-style: solid;
        border-width: 4px;
        /* border-radius: 2px; */
        border-image-slice: 8 fill;
        height: 8px;


        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        font-size: 10px;
        text-align: center;
        overflow: visible;
        text-wrap: nowrap;

        /* padding: 4px 10px 0px 10px; */
        /* margin: 0 10% 0 10%; */
        /* justify-content: center;
    align-items: center; */


    }

    .UserLevelText {
        display: flex;
        position: relative;
        font-family: "Luckiest Guy", serif;
        font-size: 20px;
        top: -5px;
        width: 100%;
        /* text-align: center; */
        /* vertical-align: -10px; */
        /* padding-top: -5px; */


    }

    .UserLadderRank {
        margin-top: 2px;
        display: flex;
        border-image: url(/0a894a64e6013e044051.png);
        border-style: solid;
        border-width: 4px;
        border-image-slice: 9 fill;
        min-height: 10px;
        max-height: 15px;
        flex-grow: 1;

        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        font-size: 8px;
        text-align: center;
        overflow: visible;
    }

    .UserLadderRankText {
        display: flex;
        position: relative;
        font-family: "Luckiest Guy", serif;
        font-size: 12px;
        top: 4px;
        width: 100%;

        /* text-align: center; */
        /* vertical-align: -10px; */
        /* padding-top: -5px; */
        img {
            margin-top: -8px;
        }
    }


    .Hunt {
        display: flex;
        flex-direction: column;
        width: 300px;
        /* background-color: blue; */
        margin-right: 10px;
        height: 100%;
        margin: auto;
    }

    /* .chronocristal {
        display: flex;
        flex-direction: row;
        width: 85px;
        height: 100%;

    } */

    .huntnitems {
        display: flex;
        flex-direction: row;
        /* background-color: yellow; */
        width: 100%;
        flex-grow: 1;
    }

    .Hunt .hunt {
        display: flex;
        width: 80px;
        height: 80px;
        background-image: url(/1ec1721c55e5a04e6ae8.png);
        /* border-image: url("../../assets/Buttons/Button_Red_32x32.png");
        border-style: solid;
        border-width: 9px;
        border-image-slice: 9 fill; */
        align-items: center;
        justify-content: center;
        font-size: 20px;
        /* height: 65px; */
        background-size: cover;
        margin-top: 6px;
        -webkit-text-stroke: 1px black;


    }

    .Hunt .hunt .huntlabel {
        top: -1px;
        display: flex;
        position: relative;
    }

    .Hunt .hunt:hover {
        background-image: url(/5ac797e7971779d80265.png);

        .huntlabel {
            top: 2px;
        }
    }

    .Hunt .items {
        margin-left: 20px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        /* background-color: green; */
    }


    .item {
        display: flex;
        margin: 2px 5px 2px 0;

        /* max-height: 34px; */
        /* background-color: black; */

        align-items: center;

        font-family: "Luckiest Guy", serif;
        font-size: 20px;
        background-image: url(/3222a358a8bf16125234.png);
        background-size: cover;
        height: 30px;
        width: 30px;
        position: relative;
        /* allow absolute positioning of the amount badge */

        /* ensure there's a little extra space for the amount badge so it doesn't collide */
        min-width: 36px;

        .ItemImg {
            display: flex;
            max-height: 35px;
            max-width: 35px;
            height: 35px;
            width: 35px;
            margin-left: -2px;
            margin-top: -14px;
        }

        .itemAmount {
            position: absolute;
            right: -6px;
            top: -6px;
            background: rgba(0, 0, 0, 0.65);
            color: #fff;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 12px;
            line-height: 1;
            min-width: 18px;
            text-align: center;
            pointer-events: none;
        }
    }

    .health div {
        transition: width 1s ease-in-out;
    }

    .health {
        display: flex;
        flex-grow: 1;
        height: 20px;
        margin-top: 5px;
        border-image: url(/d48c684fa65d2301f4a9.png);
        border-style: solid;
        border-width: 3px;
        border-image-slice: 3 fill;
        text-align: center;
        justify-content: center;
        position: relative;
    }

    .health span {
        position: relative;
        top: 3px;
    }



    .Travel {
        margin-top: -5px;
        display: flex;
        flex-direction: column;
        width: 170px;
        height: 100px;
        max-height: 100px;
        position: relative;
        margin-top: 20px;
        margin-left: auto;
        /* background-color: blueviolet; */
    }

    .Travel .LocationImage {
        display: flex;
        flex-grow: 1;
        position: relative;
        top: -30px;
        width: 140px;
        height: 140px;
        /* background-color: black; */
        z-index: 2;
        pointer-events: none;
    }

    .Travel .LocationName {
        display: flex;
        position: absolute;
        bottom: 10px;
        left: 5px;
        padding-left: 3px;
        /* background-color: #0000008b; */
        width: 99%;
        height: 19px;
        font-size: 13px;
        font-family: "Luckiest Guy", serif;
        color: black;
        z-index: 2;
        /* -webkit-text-stroke: 2px black; */

    }

    .TravelButton {
        display: flex;
        position: relative;
        height: 40px;
        width: 60px;
        top: -90px;
        right: -115px;
        border-image: url(/5860d2d548f21e2abf84.png);
        border-style: solid;
        border-width: 5px;
        border-image-slice: 5 fill;

        text-align: center;
        justify-content: center;
        font-size: 12px;
        z-index: 1;
        padding: 8px;

    }

    .TravelButton:hover {

        color: var(--purple);
    }

    .TravelButton span {
        position: relative;
        margin: 2px 5px 0 5px;

    }

    /* .BaitItem {
    display: flex;
    width: auto;
    height: auto;
    max-height: 40px;
    max-width: 40px;

}

.HexItem {
    display: flex;
    width: auto;
    height: auto;
    max-height: 40px;
    max-width: 40px;

} */

    .ItemImg {
        display: flex;

        max-height: 34px;
        max-width: 34px;

    }

    .ProfilePicImage {
        display: flex;
        width: 110px;
        height: 150px;

        /* image should not be streched */
        object-fit: cover;
    }

    .ProfileAvatarImage {
        display: flex;
        position: absolute;
        width: 90px;
        height: 85px;
        top: 38px;
        left: -98px;
        z-index: 2;

        /* image should not be stretched */
        object-fit: contain;
        border-radius: 50%;
    }

    .ProfileCoinImage {
        display: flex;
        position: absolute;
        width: 80px;
        height: 80px;
        z-index: 1;
        bottom: -50px;
        right: 15px;
        background-size: contain;
        pointer-events: visible;
    }

    .UserRank {
        font-size: 10px;
        margin-top: -3px;
    }


    .coffin {
        display: flex;
        /* flex-grow: 1; */
        height: 10px;
        width: 200px;

        border-image: url(/ebd81102e40c5369c22e.png);
        border-style: solid;
        border-width: 9px;
        border-image-slice: 9 fill;
        text-align: center;
        justify-content: center;
        position: relative;


    }

    .coffin span {
        position: relative;
        top: -3px;
    }


    .marginRight5px {
        margin-right: 5px;
    }

    .chronocrystal {
        display: flex;
        position: relative;

        .BlueButton {
            display: flex;
            flex-direction: row;
            width: 250px;
            height: 16px;
            justify-content: center;
            cursor: pointer;


        }



        .ChristalImg {
            position: absolute;
            display: flex;
            left: -50px;
            width: 40px;
            height: 40px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABNCAYAAAAb6RJHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplYmM1MTdmYS1kNjBlLWQ4NDItOGFhYi0xY2Q1YTFhNzZlOWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTUzOTc4NDQwMUFBMTFFQkE4N0VDQkU2MkU2OTA2MjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTUzOTc4NDMwMUFBMTFFQkE4N0VDQkU2MkU2OTA2MjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YmUyZjI4MTQtZmEzYi0wODQ4LTgzNzEtZTMzYzNhZTlhNjIzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmViYzUxN2ZhLWQ2MGUtZDg0Mi04YWFiLTFjZDVhMWE3NmU5YyIv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);
            background-size: cover;
            background-repeat: no-repeat;
            top: -20px;
        }
    }

    .PatreonIcon {
        height: 42px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAAqCAYAAACeC1RqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1zbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1zbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1zbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplYmM1MTdmYS1kNjBlLWQ4NDItOGFhYi0xY2Q1YTFhNzZlOWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTU2NTRENkEwMUFBMTFFQkE4N0VDQkU2MkU2OTA2MjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTU2NTRENjkwMUFBMTFFQkE4N0VDQkU2MkU2OTA2MjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YmUyZjI4MTQtZmEzYi0wODQ4LTgzNzEtZTMzYzNhZTlhNjIzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmViYzUxN2ZhLWQ2MGUtZDg0Mi04YWFiLTFjZDVhMWE3NmU5YyIv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);
        background-size: cover;
        background-repeat: no-repeat;
        width: 125px;
        position: absolute;
        display: flex;
        bottom: 5px;
        left: -10px;
    }
}
@media only screen and (max-width: 700px) {
    .gamehomeheader {
        display: flex;
        flex-direction: row;
        /* background-color: red; */
        /* height: 100px; */
        width: 100%;
        /* height: 200px; */
        /* background-image: url("../../assets/game/header/BLC_Header.png"); */
        justify-content: space-between;
        /* margin-bottom: 20px; */

        background-image: url(/e03573011cef68b78157.png);
        background-size: cover;
        background-position: center;
    }

    .gamehomeheader .dropdown-button {
        display: flex;
        border-image: url(/9216644adbce1b8d0840.png);
        border-style: solid;
        border-width: 4px;

        border-image-slice: 8 fill;
        margin-top: 5px;

        height: 18px;
        /* min-height: 5px;
    max-height: 10px; */
        /* width: 67%; */
        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        font-size: 16px;
        text-align: center;

    }

    .gamehomeheader .dropdown-foldout {
        display: flex;
        width: 10px;
        /* background-color: red; */
        /* padding: -4px; */
        margin: -4px;
        border-image: url(/ebd81102e40c5369c22e.png);
        border-style: solid;
        border-width: 9px;
        border-image-slice: 9 fill;

    }

    .gamehomeheader .dropdown-menu {
        display: block;
        position: absolute;
        background-color: black;
        min-width: 130px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .gamehomeheader .dropdown-menu a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-transform: uppercase;
    }

    .gamehomeheader .dropdown-menu a:hover {
        background-color: rgb(25, 1, 1);
        color: rgb(180, 1, 1);
    }

    .gamehomeheader .PlayerProfile {
        display: none;
        flex-direction: row;
        width: 150px;
        /* background-color: greenyellow; */
    }

    .gamehomeheader .ProfilePicFrame {
        display: none;
        width: 160px;
        height: 200px;
        /* background-color: greenyellow; */
        /* z-index: 1; */
    }

    .ProfilePic {
        display: flex;
        position: relative;
        margin: 0px;
        flex-grow: 1;
        /* background-color: greenyellow; */
    }

    .ProfileDetails {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-top: 0px;
        width: 100px;
        margin-right: 10px;

        .dropdown {
            text-transform: uppercase;
        }

    }

    .gameHeaderrows {
        display: flex;
        flex-direction: column;
        margin-right: 0px;
        flex-grow: 1;
    }

    .gameHeaderColums {
        padding: 15px 0 0 0;
        display: flex;
        /* flex-grow: 1; */
        /* height: 115px; */
        justify-content: space-between;
        flex-direction: row;
        width: 100%;

    }

    .UserName {
        font-size: 22px;
    }

    .UserLevelBackground {
        margin-top: 5px;
        display: flex;
        width: 100%;

        background-color: black;
    }

    .UserLevelTextFont {
        display: flex;
        position: relative;
        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        font-size: 16px;
        text-align: center;
        overflow: visible;
        text-wrap: nowrap;
    }

    .UserLevel {

        display: flex;
        flex-direction: column;
        border-image: url(/1bc9359d21d1fb62387c.png);
        border-style: solid;
        border-width: 4px;
        /* border-radius: 2px; */
        border-image-slice: 8 fill;
        height: 12px;


        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        font-size: 10px;
        text-align: center;
        overflow: visible;
        text-wrap: nowrap;

        /* padding: 4px 10px 0px 10px; */
        /* margin: 0 10% 0 10%; */
        /* justify-content: center;
    align-items: center; */


    }

    .UserLevelText {
        display: flex;
        position: relative;
        font-family: "Luckiest Guy", serif;
        font-size: 20px;
        top: -5px;
        width: 100%;
        /* text-align: center; */
        /* vertical-align: -10px; */
        /* padding-top: -5px; */


    }

    .UserLadderRank {
        margin-top: 5px;
        display: flex;
        border-image: url(/0a894a64e6013e044051.png);
        border-style: solid;
        border-width: 4px;
        border-image-slice: 9 fill;
        min-height: 15px;
        max-height: 15px;
        flex-grow: 1;

        color: whitesmoke;
        font-family: "Luckiest Guy", serif;
        font-size: 10px;
        text-align: center;
        overflow: visible;
    }

    .UserLadderRankText {
        display: flex;
        position: relative;
        font-family: "Luckiest Guy", serif;
        font-size: 16px;
        top: 0px;
        width: 100%;
        /* text-align: center; */
        /* vertical-align: -10px; */
        /* padding-top: -5px; */


    }


    .Hunt {
        display: flex;
        flex-direction: row;
        /* width: 100%; */
        /* background-color: blue; */
        margin-right: 10px;
        height: 100%;
        margin-left: auto;
        width: 30px;
        position: relative;
        /* allow absolute positioning of amount */

    }

    .huntnitems {
        display: flex;
        flex-direction: row;
        /* background-color: yellow; */
        width: 100%;
        flex-grow: 1;
        align-items: flex-start;
    }

    .Hunt .hunt {
        display: flex;
        width: 100px;
        height: 100px;
        background-image: url(/1ec1721c55e5a04e6ae8.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-top: 6px;
        -webkit-text-stroke: 1px black;

        border: none;
        border-image: none;
    }

    .Hunt .hunt .huntlabel {
        top: -1px;
        display: flex;
        position: relative;
    }

    .Hunt .hunt:hover {
        background-image: url(/5ac797e7971779d80265.png);

        .huntlabel {
            top: 2px;
        }
    }

    .Hunt .items {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-left: 20px;
        margin-top: 10px;
        width: auto;
        /* background-color: green; */
    }


    .item {
        display: flex;
        margin: 2px 5px 2px 0;
        max-height: 34px;
        background-color: rgba(0, 0, 0, 0.0);
        align-items: center;
        font-family: "Luckiest Guy", serif;
        font-size: 16px;
        width: 30px;
        /* min-width: 60px; */
        background-image: url(/3222a358a8bf16125234.png);
        background-size: cover;
        height: 30px;
        margin-right: 35px;

        .ItemImg {
            display: flex;
            max-height: 32px;
            max-width: 32px;
            height: 32px;
            width: 32px;
            margin-left: -2px;
            margin-top: -12px;
        }
    }

    .health div {
        transition: width 1s ease-in-out;
    }

    .health {
        display: flex;
        flex-grow: 1;
        height: 20px;
        margin-top: 5px;
        border-image: url(/d48c684fa65d2301f4a9.png);
        border-style: solid;
        border-width: 3px;
        border-image-slice: 3 fill;
        text-align: center;
        justify-content: center;
        position: relative;
    }

    .health span {
        position: relative;
        top: 3px;
    }



    .gamehomeheader .Travel {
        margin-top: -5px;
        display: none;
        flex-direction: column;
        width: 170px;
        position: relative;
        /* background-color: blueviolet; */
    }

    .Travel .LocationImage {
        display: flex;
        flex-grow: 1;
        position: relative;
        width: 190px;
        height: auto;
        /* background-color: black; */
    }

    .Travel .LocationName {
        display: flex;
        position: absolute;
        bottom: 80px;
        padding-left: 3px;
        background-color: #0000008b;
        width: 180px;
        height: 16px;
        font-size: 13px;
        font-family: "Luckiest Guy", serif;
        color: azure;

    }

    .TravelButton {
        display: flex;
        height: 20px;
        width: 180px;
        border-image: url(/fdd21d6dfcad909893fa.png);
        border-style: solid;
        border-width: 5px;
        border-image-slice: 5 fill;

        text-align: center;
        justify-content: center;
        font-size: 14px;

    }

    .TravelButton:hover {

        color: red;
    }

    .TravelButton span {
        position: relative;
        margin: 2px 5px 0 5px;

    }

    /* .BaitItem {
    display: flex;
    width: auto;
    height: auto;
    max-height: 40px;
    max-width: 40px;

}

.HexItem {
    display: flex;
    width: auto;
    height: auto;
    max-height: 40px;
    max-width: 40px;

} */

    .ItemImg {
        display: flex;
        width: 18px;
        height: 18px;
        max-height: 34px;
        max-width: 34px;

    }

    /* badge for item amounts on mobile */
    .item .itemAmount {
        position: absolute;
        right: -8px;
        top: -6px;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 2px 5px;
        border-radius: 10px;
        font-size: 11px;
        min-width: 16px;
        text-align: center;
        pointer-events: none;
    }

    .ProfilePicImage {
        display: flex;
        width: 100px;
        height: 120px;

        /* image should not be streched */
        object-fit: cover;
    }

    .ProfileCoinImage {
        display: flex;
        position: absolute;
        width: 60px;
        height: 60px;
        z-index: 1;
        bottom: -35px;
        right: 20px;
        background-size: contain;
        pointer-events: visible;
    }

    .UserRank {
        font-size: 12px;
        margin-top: -6px;
    }


    .coffin {
        display: flex;
        /* flex-grow: 1; */
        height: 10px;
        width: 100%;

        border-image: url(/ebd81102e40c5369c22e.png);
        border-style: solid;
        border-width: 9px;
        border-image-slice: 9 fill;
        text-align: center;
        justify-content: center;
        position: relative;


    }

    .coffin span {
        position: relative;
        top: -3px;
    }


    .marginRight5px {
        margin-right: 5px;
    }

    .chronocrystal {
        display: flex;
        position: relative;
        margin: 5px 0;

        .BlueButton {
            display: flex;
            flex-direction: row;
            /* width: 80px;
            height: 80px; */
            min-width: 40px;
            min-height: 40px;
            max-width: 80px;
            max-height: 80px;
            justify-content: center;
            cursor: pointer;
        }

        .ChristalImg {
            position: absolute;
            display: flex;
            left: -30px;
            width: 30px;
            height: 30px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABNCAYAAAAb6RJHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplYmM1MTdmYS1kNjBlLWQ4NDItOGFhYi0xY2Q1YTFhNzZlOWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTUzOTc4NDQwMUFBMTFFQkE4N0VDQkU2MkU2OTA2MjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTUzOTc4NDMwMUFBMTFFQkE4N0VDQkU2MkU2OTA2MjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YmUyZjI4MTQtZmEzYi0wODQ4LTgzNzEtZTMzYzNhZTlhNjIzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmViYzUxN2ZhLWQ2MGUtZDg0Mi04YWFiLTFjZDVhMWE3NmU5YyIv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);
            background-size: cover;
            background-repeat: no-repeat;
            top: -15px;
        }
    }

    .gamehomeheader .gamenavigation {
        display: none;
    }
}

/* Extra small screens: allow Hunt area to scale down and wrap so it fits in ~300px */
@media only screen and (max-width: 360px) {
    .gamehomeheader {
        /* allow the header to shrink to a small fixed width when the viewport is very narrow */

        margin-left: -2.5vw;
        margin-bottom: 12px;
    }

    .Hunt {
        /* stack vertically if needed and center */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .huntnitems {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* let items wrap under the hunt button */
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 6px;
    }

    .Hunt .hunt {
        width: 64px;
        height: 64px;
        font-size: 16px;
        margin-top: 4px;
        background-size: cover;
    }

    .Hunt .items {
        margin-left: 8px;
        margin-top: 6px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        width: auto;
    }

    .item {
        width: 28px;
        height: 28px;
        font-size: 14px;
        margin: 2px 4px 2px 0;
        margin-right: 8px;
        background-size: cover;
    }

    .ItemImg {
        width: 20px;
        height: 20px;
        margin-top: -8px;
        margin-left: 0px;
    }

    .chronocrystal .BlueButton {
        width: 160px;
        height: 28px;
        font-size: 12px;
        padding: 4px 6px;
        justify-content: center;
    }

}

/* Mid-size phones / small tablets: restore desktop-like sizing to avoid broken layout between 361px and 700px */
@media only screen and (min-width: 361px) and (max-width: 700px) {
    .gamehomeheader {
        position: relative;

        height: 160px;
    }

    /* make Hunt area match desktop proportions */
    .Hunt {
        display: flex;
        /* flex-direction: column; */
        width: 90vw;
        /* margin-right: 10px; */
        height: 100%;
        margin: auto;
        align-items: flex-start;

    }

    .huntnitems {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-grow: 1;
        align-items: flex-start;
    }

    .Hunt .hunt {
        width: 80px;
        height: 80px;
        font-size: 20px;
        margin-top: 6px;
        background-size: cover;
    }

    .Hunt .items {
        margin-left: 20px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .item {
        display: flex;
        margin: 2px 5px 2px 0;
        align-items: center;
        font-family: "Luckiest Guy", serif;
        font-size: 20px;
        background-image: url(/3222a358a8bf16125234.png);
        background-size: cover;
        height: 30px;
        width: 30px;
        position: relative;
        margin-right: 35px;
    }

    .ItemImg {
        max-height: 35px;
        max-width: 35px;
        height: 35px;
        width: 35px;
        margin-left: -2px;
        margin-top: -14px;
    }

    .item .itemAmount {
        position: absolute;
        right: -6px;
        top: -6px;
        background: rgba(0, 0, 0, 0.65);
        color: #fff;
        padding: 2px 6px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1;
        min-width: 18px;
        text-align: center;
        pointer-events: none;
    }

    /* use desktop-like font-size for prominent header text */
    .UserName {
        font-size: 18px;
    }

    .UserLevelTextFont {
        font-size: 14px;
    }

    .UserLadderRankText {
        font-size: 12px;
    }
}
.gamenavigation {
    display: flex;
    /* background-color: aqua; */
    padding-left: 20px;
    padding-right: 20px;
    height: 40px;
    font-size: 18px;

}

.gamenavigation a {
    margin: auto;

    font-family: "Luckiest Guy", serif;
    z-index: 4;
}




.gamenavigation .dropdown {
    position: relative;
    display: inline-block;
    margin: auto;


}

.gamenavigation .dropdown-menu {
    display: block;
    position: absolute;
    background-color: black;
    min-width: 210px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.gamenavigation .dropdown-menu a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
}

.gamenavigation .dropdown-menu a:hover {
    background-color: rgb(25, 1, 1);

    color: rgba(153, 0, 255, 255);
}

/* 
.gamenavigation .dropdown-button {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-size: 18px;
    margin: auto;

} */

.gamenavigation .dropdown-button {
    display: flex;
    border-image: "";
    border-style: solid;
    border-width: 0px;

    border-image-slice: 0;
    margin: auto;




}

.gamenavigation .dropdown-foldout {
    display: none;
    width: 2px;
    /* background-color: red; */
    /* padding: -4px; */
    /* margin: -4px; */
    border-image: url(/ebd81102e40c5369c22e.png);
    border-style: solid;
    border-width: 0px;
    border-image-slice: 0 fill;

}
.dropdown {
    position: relative;
    display: inline-block;

}

.dropdown-menu {
    display: block;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-menu a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

.dropdown-button {
    display: flex;
    justify-content: space-between;
    cursor: pointer;

}

.dropdown-button:hover {
    color: var(--purple);

    text-decoration: none;
}

.DropDownIcon {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    margin-left: 8px;
}

.dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.dropdown-item a {
    flex: 1;
    margin-right: 8px;
    min-width: 0;
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;

    background: linear-gradient(135deg, #4a0e4e, #2d0831);

    color: white;
    padding: 20px;
    border: 3px solid #7b2d93;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(123, 45, 147, 0.3);
    z-index: 1000;
    animation: fadeOpacityIn 0.5s;
    animation-fill-mode: forwards;
    min-width: max(200px, 70%);
    max-width: min(80%, 600px);
    min-height: 100px;
    max-height: 85vh;
    padding: 40px 15px 15px 15px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #7b2d93 transparent;

}

.popup h1,
.popup h2,
.popup h3 {
    color: #e6d7ff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 0;
}

.popup p {
    color: #f0f0f0;
    line-height: 1.6;
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

@keyframes fadeOpacityIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOpacityOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@media only screen and (min-width: 700px) {
    .gamehomenewsheader {
        display: flex;
        flex-direction: column;

        /* background-color: red; */

        /* flex-grow: 0 1; */
        /* margin-right: 15px; */
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .gamehomesettings {
        display: flex;
        flex-direction: row-reverse;
        height: 25px;
        width: 100%;
        margin-bottom: 4px;
    }

    .gamehomesnews {
        display: flex;
        flex-direction: row;
        height: 80px;
        width: 100%;
        /* margin-bottom: -15px; */
        justify-content: left;


    }


    .gamehomenewsnews {
        display: flex;
        flex-direction: row;
        max-width: 395px;
        width: 100%;
    }

    .gamehomenewsnews:hover {
        cursor: pointer;
        filter: brightness(60%);


    }



    .newsText {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        width: 100%;
        text-overflow: ellipsis;

    }

    .newsText h1 {
        margin: 0;
        padding: 0;
        font-size: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 300px;
        white-space: nowrap;
        height: 20px;
    }

    .newsText p {
        margin: 0;
        padding: 0;
        font-size: 14px;
        text-overflow: ellipsis;
        height: 55px;
        overflow: hidden;
        text-overflow: ellipsis;

    }

    .NewsImage {
        display: flex;
        flex-direction: row;
        max-width: 250px;
        max-height: 100%;
        width: 80px;
        height: 80px;

    }

    .GTAd {
        display: flex;
        flex-direction: column;
        visibility: show;
    }

    .headerSocialIcons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 10px;


        .socialIcon {

            height: 18px;
            width: 18px;
        }
    }

    .gamehomenewsSocial {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;




    }

    .BLCLogo {
        width: 120px;
        padding: 0px;
    }

    .BLCLogo img {
        width: 100%;
        height: auto;
    }

    .gamehomenewsLogo {
        display: flex;
        position: relative;
        width: 200px;
        height: 80px;
        background-image: url(/65181b1ddd2844101dc4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;



    }

    .premiumShopMobile {
        display: none;
        margin-left: auto;
        margin-right: auto;
    }

    .gamehomenewspremiumshop {
        display: flex;


        margin-left: 5px;

        width: 140px;
        height: 81px;

        background-image: url(/344e022288034dfdcac8.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        justify-content: center;
        align-items: center;
        -webkit-text-stroke: 1px black;

    }

    .LogoutBtn {
        margin: 3px;
        width: 15px;
        height: auto;
        position: relative;
        display: inline-block;
        background-image: url(/a01db80ac56ef45f8ea3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;


    }



    .LogoutBtn:hover {

        cursor: pointer;
        filter: hue-rotate(180deg);
    }



    audio {
        height: 20px;
        margin-left: auto;
        margin-right: auto;
        background-color: black;
    }


    .gamehomenewsContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 395px;
        width: 100%;

    }

    .newsDots {
        display: flex;
        flex-direction: row-reverse;
    }

    .newsDot {
        height: 10px;
        width: 10px;
        background-color: #bbb;
        border-radius: 50%;

        margin: 0 2px;
    }

    .newsDot.current {
        background-color: red;
    }

    .NewsImageInPopup {

        display: flex;
        justify-content: center;
        max-width: 400px;
        height: auto;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 700px) {

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

        /* background-color: red; */

        /* flex-grow: 0 1; */
        /* margin-right: 15px; */
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .gamehomesettings {
        display: flex;
        flex-direction: row-reverse;
        height: 25px;
        width: 100%;
        margin-bottom: 4px;
    }

    .gamehomesnews {
        display: flex;
        flex-direction: column;
        height: 110px;
        width: 100%;
        /* margin-bottom: -15px; */
        justify-content: center;

        .spacer {
            display: none;
        }

    }


    .gamehomenewsnews {
        display: flex;
        flex-direction: row;
        max-width: 395px;
        width: 100%;


    }

    .gamehomenewsnews:hover {
        cursor: pointer;
        filter: brightness(60%);


    }



    .newsText {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        width: 100%;
        text-overflow: ellipsis;

    }

    .newsText h1 {
        margin: 0;
        padding: 0;
        font-size: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 300px;
        white-space: nowrap;
        height: 20px;
    }

    .newsText p {
        margin: 0;
        padding: 0;
        font-size: 14px;
        text-overflow: ellipsis;
        height: 55px;
        overflow: hidden;
        text-overflow: ellipsis;

    }

    .NewsImage {
        display: flex;
        flex-direction: row;
        max-width: 250px;
        max-height: 100%;
        width: 80px;
        height: 80px;

    }

    .GTAd {
        display: none;
        visibility: hidden;
    }

    .headerSocialIcons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        margin-top: 10px;

        .socialIcon {

            height: 18px;
            width: 18px;
        }
    }

    .gamehomenewsSocial {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;


    }

    .GTLogo {
        width: 120px;
        padding: 0px;
    }

    .GTLogo img {
        width: 100%;
        height: auto;
    }

    .gamehomenewsLogo {
        display: none;
        position: relative;
        width: 200px;
        height: 80px;
        background-image: url(/b18602f7febfff8b1edb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;



    }

    .premiumShopMobile {
        display: flex;
        margin-left: auto;
        margin-right: auto;
        color: rgb(158, 119, 4);
        font-weight: bold;
        text-transform: uppercase;
    }

    .gamehomenewspremiumshop {
        display: none;


        margin-left: 5px;

        width: 140px;
        height: 81px;

        background-image: url(/1fec4639fddec1ebe75a.png);
    }

    .LogoutBtn {
        margin: 3px;
        width: 15px;
        height: auto;
        position: relative;
        display: inline-block;
        background-image: url(/a01db80ac56ef45f8ea3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;


    }



    .LogoutBtn:hover {

        cursor: pointer;
        filter: hue-rotate(180deg);
    }



    audio {
        height: 20px;
        margin-left: auto;
        margin-right: auto;
        background-color: black;
    }


    .gamehomenewsContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 395px;
        width: 100%;

    }

    .newsDots {
        display: flex;
        flex-direction: row-reverse;
    }

    .newsDot {
        height: 10px;
        width: 10px;
        background-color: #bbb;
        border-radius: 50%;

        margin: 0 2px;
    }

    .newsDot.current {
        background-color: red;
    }

    .NewsImageInPopup {

        display: flex;
        justify-content: center;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}
.music-player {
    display: flex;

    color: var(--purple);
    height: 18px;
    margin-right: 40px;
}

.play-button,
.volume-button {

    border: none;
    color: var(--purple);

    height: 20px;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    margin: 0 5px 0 5px;
    width: auto;

}

.volume-slider {
    position: relative;

    color: var(--purple);
    ;
}

.volume-slider input {
    width: 100px;
    background-color: ar(--purple);
}

.volume-slider input::-webkit-slider-thumb {
    background-color: var(--purple);
    ;
}



.volume-slider input {
    width: 100px;
}


/*********** Baseline, reset styles ***********/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100px;
}

/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--purple);
    ;
    border-radius: 1rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    margin-top: -4px;
    /* Centers thumb on the track */
    background-color: #d6d6d6;
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
    outline: 3px solid #d6d6d6;
    outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
    background-color: #9e0000;
    border-radius: 1rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
    background-color: var(--purple);

    border: none;
    /*Removes extra border that FF applies*/
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
    outline: 3px solid var(--purple);

    outline-offset: 0.125rem;
}
.barLogo {
    background-image: url(/3f87b9d5d429fb47831e.png);
}
@media only screen and (min-width: 700px) {
    .shopHeaderBody {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100%;
        flex-grow: 1;

        justify-content: flex-start;
        overflow: visible;

        top: -75px;
        position: relative;

        .itemTypeSelectionRow {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            position: absolute;
            top: -25px;
            margin-left: 0px;
        }

    }

    .shopHeaderBody h1 {
        padding-bottom: 20px;
    }

    .shopHeaderBody .quantity {
        display: flex;
        position: absolute;
        top: -30px;
        right: 0px;
        justify-content: right;
        align-content: center;
        margin-top: auto;


    }

    .shopHeaderBody .quantity label {
        margin-top: auto;
        margin-bottom: auto;
    }
}

@media only screen and (max-width: 700px) {
    .shopHeaderBody {
        display: flex;
        flex-direction: column;
        /* flex-wrap: wrap; */
        width: 100%;
        height: 100%;
        flex-grow: 1;
        justify-content: flex-start;
        overflow: visible;
    }

    .shopHeaderBody h1 {
        padding-bottom: 0px;
        margin: 0px;
    }

    .shopCategoryAndQuantity {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
        padding: 10px;
    }

    .itemTypeSelectionRow {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
    }

    .itemTypeSelectionRow .YellowButton,
    .itemTypeSelectionRow .PurpleButton {
        min-width: 90px;
        max-width: none;
        height: 40px;
        font-size: 0.8rem;
        padding: 8px 12px;
        overflow: visible;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1 1 calc(33.333% - 8px);
        min-width: 120px;
    }

    .shopHeaderBody .quantity {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        margin-top: 0;
    }

    .shopHeaderBody .quantity label {
        margin: 0;
        font-weight: bold;
        width: 100%;
        margin-bottom: 8px;
    }

    .shopHeaderBody .quantity .YellowButton {
        min-width: 60px;
        height: 36px;
        font-size: 0.9rem;
        padding: 6px 12px;
        flex: 1 1 calc(25% - 8px);
        min-width: 70px;
    }
}
.statsBody__T1d7dg3g {
    display: flex;
    width: 100%;
    word-break: normal;
    flex-direction: column;
    margin-top: 10px;
    text-align: left;
    flex-wrap: wrap;
}

.statImg__vQnPBVKr {
    width: 25px;
    height: 25px;
}

.statEntry__J1sILhMQ {
    display: flex;
    flex-direction: row;
    padding-bottom: 2px;
    align-items: center;
}

.statEntryDescription__z5aqBIfr {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
    color: azure;
    font-size: 0.85rem;
    line-height: 1.2;
}

/* Large screens - Desktop */
@media only screen and (min-width: 550px) {
    .statImg__vQnPBVKr {
        width: 25px;
        height: 25px;
    }

    .statEntryDescription__z5aqBIfr {
        font-size: 0.85rem;
        padding-left: 10px;
    }

    .statsBody__T1d7dg3g {
        margin-top: 10px;
    }

    .statEntry__J1sILhMQ {
        padding-bottom: 2px;
    }
}

/* Small screens - Mobile */
@media only screen and (max-width: 549px) {
    .statImg__vQnPBVKr {
        width: 18px;
        height: 18px;
    }

    .statEntryDescription__z5aqBIfr {
        font-size: 0.65rem;
        padding-left: 6px;
        line-height: 1.1;
    }

    .statsBody__T1d7dg3g {
        margin-top: 6px;
    }

    .statEntry__J1sILhMQ {
        padding-bottom: 1px;
    }
}

/* Extra small screens */
@media only screen and (max-width: 400px) {
    .statImg__vQnPBVKr {
        width: 16px;
        height: 16px;
    }

    .statEntryDescription__z5aqBIfr {
        font-size: 0.6rem;
        padding-left: 4px;
    }

    .statsBody__T1d7dg3g {
        margin-top: 4px;
    }

    .statEntry__J1sILhMQ {
        padding-bottom: 1px;
    }
}
@media only screen and (min-width: 700px) {

    .shopCategoryAndQuantity {
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .cryptBody .quantity label {
        margin-top: auto;
        margin-bottom: auto;
    }

    .grid-flex-container {
        display: flex;
        flex-direction: row;
        overflow: visible;
        flex-wrap: wrap;
        justify-content: start;
        /* Verteilt die Elemente gleichmäßig in der Zeile */
    }

    .grid-flex-item {
        /* Border image settings */
        border-image: url(/8bedf2b5e08ad9a9da87.png);
        border-style: solid;
        border-width: 10px;
        border-image-slice: 15;
        /* Remove 'fill' keyword here */
        border-image-repeat: repeat;

        /* Add background image for the center/fill part */
        background-image: url(/8bedf2b5e08ad9a9da87.png);
        background-origin: border-box;
        background-clip: padding-box;

        /* Make the center/fill part stretch */
        background-size: calc(100% - 0px) calc(100% - 0px);
        /* Account for border width */
        background-position: center;
        background-repeat: no-repeat;

        /* Rest of your existing properties */
        display: flex;
        flex-direction: column;
        min-width: 100px;
        flex: 0 0 calc(50% - 2.5rem);
        margin: 0.5rem;
        text-align: center;
        justify-content: space-between;
    }




    .grid-flex-item {
        .itemImg {
            width: 108px;
            position: relative;
            height: 140px;
            z-index: 2;

            top: 1px;
        }

        .itemImageContract {
            left: 20px;
        }
    }

    .grid-flex-item .itemImageDescription {
        margin: 0px;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: start;


    }

    .grid-flex-item .itemDescription {
        margin-left: 15px;
        display: flex;
        flex-direction: column;


    }

    .grid-flex-item .itemDescription h2 {
        font-size: 22px;
        margin-top: 2px;
        margin-bottom: 2px;
        text-transform: uppercase;
    }

    .grid-flex-item .itemDescription p {
        text-align: left;
        margin-top: 2px;
        padding-left: 2px;
        margin-bottom: 2px;
        color: grey;
    }

    .grid-flex-item .itemBuy {
        display: flex;
        flex-direction: row;
        flex-flow: row-reverse;
        flex-grow: 1;


    }

    .grid-flex-item .itemBuy .YellowButton {
        min-width: 100px;
        max-width: 200px;
        text-transform: uppercase;
        /* margin: auto; */
        /* margin-top: 5px; */
        /* margin-bottom: 5px;
    
    margin-right: 10px; */

        margin: auto 5px 5px 0px;
        min-height: 30px;
        max-height: 60px;
        flex-wrap: wrap;



    }

    .quantity {
        display: flex;
        color: darkgray;
        padding-left: 5px;
    }





    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .message-container {
        position: fixed;
        /* Fixed position */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        /* Center vertically */
        justify-content: center;
        /* Center horizontally */
        z-index: 1000;
        /* Ensure it's above other content */
    }

    .message {
        animation: fadeIn 0.5s ease-out;
        cursor: pointer;
    }

    .message.hide {
        animation: fadeOut 0.5s ease-out;
    }


    .shopLogo {


        display: flex;
        position: relative;
        width: 250px;
        /* height: 250px; */


        /* background-image: url("../../assets/game/gui_armory.png"); */
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;



    }

    /* Loading and pagination indicators */
    .loading-indicator {
        text-align: center;
        padding: 20px;
        color: #888;
        font-style: italic;
    }

    .loading-spinner {
        animation: pulse 2s infinite ease-in-out;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 0.6;
        }

        50% {
            opacity: 1;
        }
    }

    .end-indicator {
        text-align: center;
        padding: 20px;
        opacity: 0.7;
        color: #666;
        font-size: 14px;
    }
}
/* Medium mobile (420px-699px) - Compact 2-column layout */
@media only screen and (min-width: 420px) and (max-width: 699px) {
    .cryptBody .quantity label {
        margin-top: auto;
        margin-bottom: auto;
    }

    .shopCategoryAndQuantity {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .ShopItemFlavorText {
        display: flex;
        flex-direction: row;
        overflow: visible;
        flex-wrap: wrap;
    }

    .grid-flex-container {
        display: flex;
        flex-direction: row;
        overflow: visible;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }

    .grid-flex-item {
        border-image: url(/8bedf2b5e08ad9a9da87.png);
        border-style: solid;
        border-width: 10px;
        border-image-slice: 15;
        border-image-repeat: repeat;
        min-width: -webkit-min-content;
        min-width: min-content;
        background-image: url(/8bedf2b5e08ad9a9da87.png);
        background-origin: border-box;
        background-clip: padding-box;
        background-size: calc(100% - 0px) calc(100% - 0px);
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        min-width: 0;
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
        margin: 0.5rem;
        text-align: center;
        justify-content: space-between;
        min-width: 160px;
    }

    .grid-flex-item .itemImg {
        width: 60px;
        height: 80px;
        max-width: 100%;
        object-fit: contain;
        margin: 0 auto;
        z-index: 2;
        display: flex;
        position: relative;
    }

    .grid-flex-item .itemImageDescription {
        margin: 0px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 6px 4px;
    }

    .grid-flex-item .itemDescription {
        margin-left: 8px;
        margin-top: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        flex-grow: 1;
    }

    .grid-flex-item .itemDescription h2 {
        font-size: 14px;
        margin-top: 2px;
        margin-bottom: 2px;
        text-transform: uppercase;
        text-align: left;
    }

    .grid-flex-item .itemDescription p {
        text-align: left;
        margin-top: 2px;
        padding-left: 2px;
        margin-bottom: 2px;
        color: grey;
        font-size: 0.75rem;
    }

    .grid-flex-item .itemBuy {
        display: flex;
        flex-direction: row;
        flex-flow: row-reverse;
        flex-grow: 1;
        padding: 4px;
        justify-content: center;
    }

    .grid-flex-item .itemBuy .YellowButton {
        min-width: 70px;
        max-width: 100%;
        text-transform: uppercase;
        margin: auto 5px 5px 0px;
        min-height: 28px;
        max-height: 60px;
        flex-wrap: wrap;
        font-size: 0.65rem;
        padding: 4px 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quantity {
        display: flex;
        color: darkgray;
        padding-left: 2px;
        font-size: 0.55rem;
    }

    .shopLogo {
        display: flex;
        position: absolute;
        width: 100%;
        height: 150px;
        z-index: 1;
        left: 0;
        right: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .ClubHeaderDescription {
        position: relative;
        z-index: 2;

        p {
            margin: 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.75);
            color: white;
            border-radius: 4px;
            margin: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }
    }
}

/* Small mobile (<400px) - Single column layout */
@media only screen and (max-width: 399px) {
    .cryptBody .quantity label {
        margin-top: auto;
        margin-bottom: auto;
    }

    .shopCategoryAndQuantity {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .ShopItemFlavorText {
        display: flex;
        flex-direction: row;
        overflow: visible;
        flex-wrap: wrap;
    }

    .grid-flex-container {
        display: flex;
        flex-direction: row;
        overflow: visible;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }

    .grid-flex-item {
        border-image: url(/8bedf2b5e08ad9a9da87.png);
        border-style: solid;
        border-width: 10px;
        border-image-slice: 15;
        border-image-repeat: repeat;
        min-width: -webkit-min-content;
        min-width: min-content;
        background-image: url(/8bedf2b5e08ad9a9da87.png);
        background-origin: border-box;
        background-clip: padding-box;
        background-size: calc(100% - 0px) calc(100% - 0px);
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        min-width: 0;
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        margin: 0.5rem;
        text-align: center;
        justify-content: space-between;
    }

    .grid-flex-item .itemImg {
        width: 70px;
        height: 90px;
        max-width: 100%;
        object-fit: contain;
        margin: 0 auto;
        z-index: 2;
        display: flex;
        position: relative;
    }

    .grid-flex-item .itemImageDescription {
        margin: 0px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 6px 4px;
    }

    .grid-flex-item .itemDescription {
        margin-left: 10px;
        margin-top: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        flex-grow: 1;
    }

    .grid-flex-item .itemDescription h2 {
        font-size: 16px;
        margin-top: 2px;
        margin-bottom: 2px;
        text-transform: uppercase;
        text-align: left;
    }

    .grid-flex-item .itemDescription p {
        text-align: left;
        margin-top: 2px;
        padding-left: 2px;
        margin-bottom: 2px;
        color: grey;
        font-size: 0.7rem;
    }

    .grid-flex-item .itemBuy {
        display: flex;
        flex-direction: row;
        flex-flow: row-reverse;
        flex-grow: 1;
        padding: 6px;
        justify-content: center;
    }

    .grid-flex-item .itemBuy .YellowButton {
        min-width: 100px;
        max-width: 100%;
        text-transform: uppercase;
        margin: auto 5px 5px 0px;
        min-height: 32px;
        max-height: 60px;
        flex-wrap: wrap;
        font-size: 0.7rem;
        padding: 8px 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quantity {
        display: flex;
        color: darkgray;
        padding-left: 3px;
        font-size: 0.6rem;
    }

    .shopLogo {
        display: flex;
        position: absolute;
        width: 100%;
        height: 150px;
        z-index: 1;
        left: 0;
        right: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .ClubHeaderDescription {
        position: relative;
        z-index: 2;

        p {
            margin: 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.75);
            color: white;
            border-radius: 4px;
            margin: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }
    }
}

/* Small mobile (<420px) - Single column layout */
@media only screen and (max-width: 419px) {
    .cryptBody .quantity label {
        margin-top: auto;
        margin-bottom: auto;
    }

    .shopCategoryAndQuantity {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .ShopItemFlavorText {
        display: flex;
        flex-direction: row;
        overflow: visible;
        flex-wrap: wrap;
    }

    .grid-flex-container {
        display: flex;
        flex-direction: row;
        overflow: visible;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }

    .grid-flex-item {
        border-image: url(/8bedf2b5e08ad9a9da87.png);
        border-style: solid;
        border-width: 10px;
        border-image-slice: 15;
        border-image-repeat: repeat;
        min-width: -webkit-min-content;
        min-width: min-content;
        background-image: url(/8bedf2b5e08ad9a9da87.png);
        background-origin: border-box;
        background-clip: padding-box;
        background-size: calc(100% - 0px) calc(100% - 0px);
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        min-width: 0;
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        margin: 0.5rem;
        text-align: center;
        justify-content: space-between;
    }

    .grid-flex-item .itemImg {
        width: 70px;
        height: 90px;
        max-width: 100%;
        object-fit: contain;
        margin: 0 auto;
        z-index: 2;
        display: flex;
        position: relative;
    }

    .grid-flex-item .itemImageDescription {
        margin: 0px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 6px 4px;
    }

    .grid-flex-item .itemDescription {
        margin-left: 10px;
        margin-top: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        flex-grow: 1;
    }

    .grid-flex-item .itemDescription h2 {
        font-size: 16px;
        margin-top: 2px;
        margin-bottom: 2px;
        text-transform: uppercase;
        text-align: left;
    }

    .grid-flex-item .itemDescription p {
        text-align: left;
        margin-top: 2px;
        padding-left: 2px;
        margin-bottom: 2px;
        color: grey;
        font-size: 0.7rem;
    }

    .grid-flex-item .itemBuy {
        display: flex;
        flex-direction: row;
        flex-flow: row-reverse;
        flex-grow: 1;
        padding: 6px;
        justify-content: center;
    }

    .grid-flex-item .itemBuy .YellowButton {
        min-width: 100px;
        max-width: 100%;
        text-transform: uppercase;
        margin: auto 5px 5px 0px;
        min-height: 32px;
        max-height: 60px;
        flex-wrap: wrap;
        font-size: 0.7rem;
        padding: 8px 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quantity {
        display: flex;
        color: darkgray;
        padding-left: 3px;
        font-size: 0.6rem;
    }

    .shopLogo {
        display: flex;
        position: absolute;
        width: 100%;
        height: 150px;
        z-index: 1;
        left: 0;
        right: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .ClubHeaderDescription {
        position: relative;
        z-index: 2;

        p {
            margin: 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.75);
            color: white;
            border-radius: 4px;
            margin: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }
    }
}
.trophiesBody {
    display: flex;
    /* background-color: red; */
    width: 100%;
    word-break: normal;
    flex-direction: row;
    margin-top: 10px;
    text-align: left;

}



.trophiesBody .trophyImg {
    width: 50px;
    height: 50px;
    margin: 3px;
    border-color: orange;
    border-style: solid;
    border-width: 1px;


}

.trophiesBody .trophyImgNotCollected {
    width: 50px;
    height: 50px;
    margin: 3px;
    filter: grayscale(100%);
}

.trophyEntry {
    display: flex;
    flex-direction: row;
    padding-bottom: 2px;
}

.trophyEntryDescription {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
    color: azure;

}
/* Base styles for all screen sizes */
.gridFlexItem__s3fyU3AT {
    /* Border image settings */
    border-image: url(/8bedf2b5e08ad9a9da87.png);
    border-style: solid;
    border-width: 10px;
    border-image-slice: 15;
    border-image-repeat: repeat;

    /* Add background image for the center/fill part */
    background-image: url(/8bedf2b5e08ad9a9da87.png);
    background-origin: border-box;
    background-clip: padding-box;
    background-size: calc(100% - 0px) calc(100% - 0px);
    background-position: center;
    background-repeat: no-repeat;

    /* Layout */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    text-align: center;
    justify-content: space-between;

    /* Responsive sizing */
    margin: 0.25rem;
    min-width: 225px;
}

.itemImageDescription__EZ21H9f4 {
    margin: 0;
    position: relative;
    display: flex;
    padding: 8px 6px;
}

.itemImages__vMFOh7La {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
}

.itemImg__LzGd3jlW {
    position: relative;
    z-index: 2;
    object-fit: contain;
    width: 120px;
    height: 150px;
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}

.itemImageContract___TEJnvGt {
    /* Contract specific positioning adjustments - can be customized if needed */
    position: relative;
}

.itemContractTypeImg__pO8_R0C2,
.itemPetTypeImg__xAc2GeSk {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 190px;
    object-fit: contain;
    z-index: 0;
}

.itemPetTypeImg__xAc2GeSk {
    width: 48px;
    height: auto;
    margin-top: 6px;
    position: relative;
    transform: none;
    left: auto;
    bottom: auto;
    z-index: 1;
}

.itemDescription__Z80IYcyC {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.itemDescription__Z80IYcyC h2 {
    font-size: 1.1rem;
    margin: 2px 0;
    text-transform: uppercase;
    line-height: 1.2;
}

.itemDescription__Z80IYcyC p {
    margin: 2px 0;
    padding-left: 2px;
    color: grey;
    font-size: 0.9rem;
    line-height: 1.3;
}

.itemBuy__tj8DJylg {
    display: flex;
    flex-direction: row-reverse;
    flex-grow: 1;
    padding: 8px;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
}

.itemBuy__tj8DJylg .YellowButton__WOjG8RuG {
    min-width: 80px;
    max-width: 200px;
    text-transform: uppercase;
    margin: 0;
    min-height: 30px;
    max-height: 60px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.quantity__vlkj6dmh {
    display: flex;
    color: darkgray;
    padding-left: 5px;
    font-size: 0.8rem;
}

/* Trophies section styling */
.trophiesSection__FLmoU43z {
    padding: 4px 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Desktop and large tablets (≥700px) - Full-size 2-column layout */
@media only screen and (min-width: 700px) {
    .gridFlexItem__s3fyU3AT {
        flex: 0 0 calc(50% - 1rem);
        min-width: 320px;
    }

    .itemImageDescription__EZ21H9f4 {
        flex-direction: row;
        align-items: flex-start;
    }

    .itemImages__vMFOh7La {
        margin-right: 15px;
    }

    .itemImg__LzGd3jlW {
        width: 108px;
        height: 140px;
    }

    .itemImageContract___TEJnvGt {
        margin-left: 0px;
    }

    .itemContractTypeImg__pO8_R0C2,
    .itemPetTypeImg__xAc2GeSk {
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        height: 180px;
        object-fit: contain;
        z-index: 0;
    }

    .itemPetTypeImg__xAc2GeSk {
        width: 100px;
        height: auto;
        position: relative;
        top: -70px;
        transform: none;
        left: auto;
        bottom: auto;
        z-index: 1;
    }

    .itemDescription__Z80IYcyC {
        text-align: left;
    }

    .itemDescription__Z80IYcyC h2 {
        font-size: 1.375rem;
        text-align: left;
    }

    .itemDescription__Z80IYcyC p {
        text-align: left;
    }

    .trophiesSection__FLmoU43z {
        padding: 6px 8px;
        margin-top: 6px;
    }
}

/* Medium mobile (420px-699px) - Compact 2-column layout */
@media only screen and (min-width: 420px) and (max-width: 699px) {
    .gridFlexItem__s3fyU3AT {
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
        min-width: 160px;
    }

    .itemImageDescription__EZ21H9f4 {
        flex-direction: row;
        align-items: flex-start;
        padding: 6px 4px;
    }

    .itemImages__vMFOh7La {
        margin-right: 8px;
        flex-shrink: 0;
    }

    .itemImg__LzGd3jlW {
        width: 60px;
        height: 80px;
    }

    .itemImageContract___TEJnvGt {
        margin-left: 0;
    }

    .itemContractTypeImg__pO8_R0C2,
    .itemPetTypeImg__xAc2GeSk {
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 85px;
        height: 110px;
        object-fit: contain;
        z-index: 0;
    }

    .itemPetTypeImg__xAc2GeSk {
        width: 30px;
        height: auto;
        margin-top: 4px;
        position: relative;
        top: -12px;
        transform: none;
        left: auto;
        bottom: auto;
        z-index: 1;
    }

    .itemDescription__Z80IYcyC {
        text-align: left;
        width: 100%;
        flex-grow: 1;
    }

    .itemDescription__Z80IYcyC h2 {
        font-size: 0.9rem;
        margin: 1px 0;
        text-align: left;
    }

    .itemDescription__Z80IYcyC p {
        font-size: 0.75rem;
        text-align: left;
        padding-left: 0;
        margin: 1px 0;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .itemBuy__tj8DJylg {
        flex-direction: row-reverse;
        padding: 4px;
        gap: 4px;
    }

    .itemBuy__tj8DJylg .YellowButton__WOjG8RuG {
        min-width: 70px;
        max-width: 100%;
        min-height: 28px;
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    .quantity__vlkj6dmh {
        font-size: 0.55rem;
        padding-left: 2px;
    }

    .trophiesSection__FLmoU43z {
        padding: 3px 4px;
        margin-top: 3px;
    }
}

/* Small mobile (<420px) - Full-width single column */
@media only screen and (max-width: 419px) {
    .gridFlexItem__s3fyU3AT {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        width: 100%;
    }

    .itemImageDescription__EZ21H9f4 {
        flex-direction: row;
        align-items: flex-start;
        padding: 6px 4px;
    }

    .itemImages__vMFOh7La {
        margin-right: 10px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .itemImg__LzGd3jlW {
        width: 70px;
        height: 90px;
    }

    .itemImageContract___TEJnvGt {
        margin-left: 0;
    }

    .itemContractTypeImg__pO8_R0C2,
    .itemPetTypeImg__xAc2GeSk {
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 95px;
        height: 120px;
        object-fit: contain;
        z-index: 0;
    }

    .itemPetTypeImg__xAc2GeSk {
        width: 65px;
        height: auto;
        margin-top: 4px;
        position: relative;
        top: -45px;
        transform: none;
        left: auto;
        bottom: auto;
        z-index: 1;
    }

    .itemDescription__Z80IYcyC {
        text-align: left;
        width: 100%;
        flex-grow: 1;
    }

    .itemDescription__Z80IYcyC h2 {
        font-size: 0.8rem;
        margin: 1px 0;
        text-align: left;
    }

    .itemDescription__Z80IYcyC p {
        font-size: 0.7rem;
        text-align: left;
        padding-left: 0;
        margin: 1px 0;
        line-height: 1.2;
        /* Limit text to 3 lines on mobile */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .itemBuy__tj8DJylg {
        flex-direction: row-reverse;
        padding: 6px;
        gap: 6px;
    }

    .itemBuy__tj8DJylg .YellowButton__WOjG8RuG {
        min-width: 100px;
        max-width: 100%;
        min-height: 32px;
        font-size: 0.7rem;
        padding: 8px 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quantity__vlkj6dmh {
        font-size: 0.6rem;
        padding-left: 3px;
    }

    .trophiesSection__FLmoU43z {
        padding: 4px 6px;
        margin-top: 4px;
    }
}
/* Base styles for trophies */
.trophiesBody__FThKFxEs {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
    text-align: left;
    gap: 3px;
}

.trophyEntry__aKFJ6DQq {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.trophyImg__R0uKL0Ld {
    width: 50px;
    height: 50px;
    margin: 3px;
    border: 2px solid #ffa500;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.trophyImg__R0uKL0Ld:hover {
    transform: scale(1.1);
}

.trophyImgNotCollected__iP8Vz8gj {
    width: 50px;
    height: 50px;
    margin: 3px;
    filter: grayscale(100%) brightness(60%);
    border: 2px solid #666;
    border-radius: 4px;
    opacity: 0.7;
}

/* Compact style for smaller shop items */
.compact__IsDBp7SJ .trophiesBody__FThKFxEs {
    margin-top: 6px;
    gap: 2px;
}

.compact__IsDBp7SJ .trophyImg__R0uKL0Ld,
.compact__IsDBp7SJ .trophyImgNotCollected__iP8Vz8gj {
    width: 32px;
    height: 32px;
    margin: 2px;
    border-width: 1px;
}

.compact__IsDBp7SJ .trophyImg__R0uKL0Ld:hover {
    transform: scale(1.05);
}

/* Desktop styles (≥700px) */
@media only screen and (min-width: 700px) {
    .trophiesBody__FThKFxEs {
        margin-top: 10px;
        gap: 4px;
    }

    .trophyImg__R0uKL0Ld,
    .trophyImgNotCollected__iP8Vz8gj {
        width: 50px;
        height: 50px;
        margin: 3px;
    }

    .compact__IsDBp7SJ .trophyImg__R0uKL0Ld,
    .compact__IsDBp7SJ .trophyImgNotCollected__iP8Vz8gj {
        width: 36px;
        height: 36px;
        margin: 2px;
    }
}

/* Medium mobile (420px-699px) - Compact layout */
@media only screen and (min-width: 420px) and (max-width: 699px) {
    .trophiesBody__FThKFxEs {
        margin-top: 6px;
        gap: 2px;
    }

    .trophyImg__R0uKL0Ld,
    .trophyImgNotCollected__iP8Vz8gj {
        width: 40px;
        height: 40px;
        margin: 2px;
        border-width: 1px;
    }

    .compact__IsDBp7SJ .trophyImg__R0uKL0Ld,
    .compact__IsDBp7SJ .trophyImgNotCollected__iP8Vz8gj {
        width: 28px;
        height: 28px;
        margin: 1px;
    }
}

/* Small mobile (<420px) - Single column layout */
@media only screen and (max-width: 419px) {
    .trophiesBody__FThKFxEs {
        margin-top: 8px;
        gap: 3px;
    }

    .trophyImg__R0uKL0Ld,
    .trophyImgNotCollected__iP8Vz8gj {
        width: 42px;
        height: 42px;
        margin: 2px;
        border-width: 1px;
    }

    .compact__IsDBp7SJ .trophyImg__R0uKL0Ld,
    .compact__IsDBp7SJ .trophyImgNotCollected__iP8Vz8gj {
        width: 30px;
        height: 30px;
        margin: 1px;
    }
}
.officeLogo {
    background-image: url(/b380fd2e42fad5143049.png);
}
.petShopLogo {
    background-image: url(/49c59257db7dd6c9c495.png);
}
.laboratoryLogo {
    background-image: url(/fc73574587c003e8673f.png);
}
.qsecLogo {
    background-image: url(/282106a91b313c137812.png);
}
.exhibitionLogo {
    background-image: url(/b24ebcde827187947dea.png);
    background-size: cover;
    background-repeat: no-repeat;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
@media only screen and (min-width: 700px) {
    .inventoryLogo {
        background-image: url(/e8730cd6002330771ad4.png);
    }

    .itemEquip {
        display: flex;
        flex-direction: row-reverse;
    }

    .ClubHeaderDescription p {
        margin-bottom: 20px;
    }

    .InventoryHeader {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin-top: 30px;
    }

    .inventoryBody {


        .itemImageDescription {


            /* #imageContainer */
            .itemImg {
                left: 0px;
                display: flex;
                position: relative;
            }
        }
    }



    .itemTypeSelectionRowInventory {
        display: flex;
        position: relative;
        bottom: 0px;
        display: flex;
        flex-direction: space-between;

        /* justify-content: right; */

        /* margin-left: auto; */
        margin-right: 20px;

        /* margin-top: auto; */
        top: 0px;

        .YellowButton {
            width: auto;
            height: 30px;
            flex-grow: 1;
            overflow: hidden;

            align-content: start;
        }

        .PurpleButton {

            flex-grow: 1;



        }
    }

    .itemCreatureTypeImg {
        width: 50px;
        height: auto;

    }

    .itemContractTypeImg {
        position: relative;
        top: -141px;
        left: -18px;
        width: 150px;
        height: 150px;
        z-index: 1;

    }

    .itemPetTypeImg {
        position: absolute;
        top: 62px;
        left: -22px;

        width: 150px;
        height: auto;
        z-index: 1;
    }

    .itemImages {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        margin: 0px 0px 0px 0px;
    }
}
@media only screen and (max-width: 700px) {
    .inventoryLogo {
        background-image: url(/e8730cd6002330771ad4.png);
    }

    .itemEquip {
        display: flex;
        flex-direction: row-reverse;
    }

    .ClubHeaderDescription p {
        margin-bottom: 20px;
    }

    .InventoryHeader {
        display: flex;
        flex-direction: column;
    }

    .itemTypeSelectionRowInventory {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

    }

    .itemTypeSelectionRow {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        justify-content: space-evenly;
        margin-bottom: 10px;
        flex-wrap: wrap;
        gap: 6px;

        .YellowButton {
            min-width: 80px;
            height: 36px;
            font-size: 0.75rem;
            padding: 6px 8px;
            margin: 2px;
            flex: 1 1 calc(33.333% - 12px);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .itemCreatureTypeImg {
        width: 50px;
        height: auto;

    }

    .itemContractTypeImg {
        position: relative;
        top: -102px;
        left: -4px;
        width: 100px;
        height: 100px;
        z-index: 1;

    }


    .itemImages {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        margin: 0px 0px 0px 0px;

    }
}
/* Enhanced Inventory Category Selector Styles */

/* Desktop styles */
@media only screen and (min-width: 701px) {
    .inventoryCategories__t8RKvu_V {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 20px 0;
        padding: 20px;
        background: linear-gradient(135deg, rgba(75, 0, 130, 0.3), rgba(138, 43, 226, 0.2));
        border-radius: 12px;
        border: 2px solid rgba(138, 43, 226, 0.4);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .categorySection__PuwB15yt {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .categorySectionTitle__MpbAYqH9 {
        font-family: "Luckiest Guy", serif;
        font-size: 16px;
        color: #e6b800;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        margin: 0;
        padding: 8px 10px;
        border-bottom: 2px solid rgba(230, 184, 0, 0.3);
        border-radius: 6px 6px 0 0;
        background: linear-gradient(135deg, rgba(230, 184, 0, 0.1), rgba(255, 204, 0, 0.05));
        cursor: pointer;
        transition: all 0.3s ease;
        -webkit-user-select: none;
                user-select: none;
        position: relative;
    }

    .categorySectionTitle__MpbAYqH9:hover {
        background: linear-gradient(135deg, rgba(230, 184, 0, 0.15), rgba(255, 204, 0, 0.08));
        transform: translateY(-1px);
    }

    .categorySectionTitle__MpbAYqH9::after {
        content: '▼';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
        font-size: 12px;
        opacity: 0.7;
    }

    .categorySection__PuwB15yt.collapsed__zeUvQ0Ku .categorySectionTitle__MpbAYqH9::after {
        transform: translateY(-50%) rotate(-90deg);
    }

    .categoryRow__bVgW87Bo {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
        padding: 10px;
        transition: all 0.3s ease;
        max-height: 1000px;
        overflow: hidden;
    }

    .categorySection__PuwB15yt.collapsed__zeUvQ0Ku .categoryRow__bVgW87Bo {
        max-height: 0;
        padding: 0 10px;
        opacity: 0;
    }

    .categoryButton__kZY9cLAb {
        position: relative;
        background: linear-gradient(135deg, #4a0e4e, #2d0630);
        border: 2px solid #8a2be2;
        border-radius: 8px;
        color: #ffffff;
        font-family: "Luckiest Guy", serif;
        font-size: 14px;
        padding: 12px 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.4),
            inset 0 1px 2px rgba(255, 255, 255, 0.1);
        overflow: hidden;
        min-height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .categoryButton__kZY9cLAb:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .categoryButton__kZY9cLAb:hover {
        transform: translateY(-2px);
        border-color: #ff6b6b;
        color: #ff6b6b;
        box-shadow:
            0 4px 15px rgba(138, 43, 226, 0.4),
            inset 0 1px 2px rgba(255, 255, 255, 0.2);
    }

    .categoryButton__kZY9cLAb:hover:before {
        left: 100%;
    }

    .categoryButton__kZY9cLAb.active__qlLplOY5 {
        background: linear-gradient(135deg, #ff6b6b, #ff4757);
        border-color: #ff3742;
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow:
            0 3px 12px rgba(255, 75, 75, 0.4),
            inset 0 1px 2px rgba(255, 255, 255, 0.3);
    }

    .categoryButton__kZY9cLAb.allItems__H7TIblnw {
        background: linear-gradient(135deg, #e6b800, #ffcc00);
        border-color: #ffd700;
        color: #2d0630;
        font-weight: bold;
        grid-column: 1 / -1;
        max-width: none;
    }

    .categoryButton__kZY9cLAb.allItems__H7TIblnw:hover {
        background: linear-gradient(135deg, #ffcc00, #ffe135);
        border-color: #ffec8b;
        color: #2d0630;
        transform: translateY(-2px);
    }

    .categoryButton__kZY9cLAb.allItems__H7TIblnw.active__qlLplOY5 {
        background: linear-gradient(135deg, #ffd700, #ffec8b);
        border-color: #fff9c4;
        color: #2d0630;
    }

    /* Special category icons */
    .categoryButton__kZY9cLAb .categoryIcon__Te2_UbPP {
        margin-right: 6px;
        font-size: 16px;
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.8));
    }
}

/* Mobile styles */
@media only screen and (max-width: 700px) {
    .inventoryCategories__t8RKvu_V {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 15px 10px;
        padding: 15px;
        background: linear-gradient(135deg, rgba(75, 0, 130, 0.25), rgba(138, 43, 226, 0.15));
        border-radius: 10px;
        border: 2px solid rgba(138, 43, 226, 0.3);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }

    .categorySection__PuwB15yt {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .categorySectionTitle__MpbAYqH9 {
        font-family: "Luckiest Guy", serif;
        font-size: 14px;
        color: #e6b800;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        margin: 0;
        padding: 6px 8px;
        border-bottom: 1px solid rgba(230, 184, 0, 0.3);
        border-radius: 4px 4px 0 0;
        background: linear-gradient(135deg, rgba(230, 184, 0, 0.1), rgba(255, 204, 0, 0.05));
        cursor: pointer;
        transition: all 0.3s ease;
        -webkit-user-select: none;
                user-select: none;
        position: relative;
    }

    .categorySectionTitle__MpbAYqH9:hover {
        background: linear-gradient(135deg, rgba(230, 184, 0, 0.15), rgba(255, 204, 0, 0.08));
    }

    .categorySectionTitle__MpbAYqH9::after {
        content: '▼';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
        font-size: 10px;
        opacity: 0.7;
    }

    .categorySection__PuwB15yt.collapsed__zeUvQ0Ku .categorySectionTitle__MpbAYqH9::after {
        transform: translateY(-50%) rotate(-90deg);
    }

    .categoryRow__bVgW87Bo {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 6px;
        padding: 8px;
        transition: all 0.3s ease;
        max-height: 1000px;
        overflow: hidden;
    }

    .categorySection__PuwB15yt.collapsed__zeUvQ0Ku .categoryRow__bVgW87Bo {
        max-height: 0;
        padding: 0 8px;
        opacity: 0;
    }

    .categoryButton__kZY9cLAb {
        position: relative;
        background: linear-gradient(135deg, #4a0e4e, #2d0630);
        border: 1.5px solid #8a2be2;
        border-radius: 6px;
        color: #ffffff;
        font-family: "Luckiest Guy", serif;
        font-size: 11px;
        padding: 8px 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        box-shadow:
            0 1px 5px rgba(0, 0, 0, 0.3),
            inset 0 1px 1px rgba(255, 255, 255, 0.1);
        overflow: hidden;
        min-height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
    }

    .categoryButton__kZY9cLAb:hover,
    .categoryButton__kZY9cLAb:active {
        transform: scale(0.98);
        border-color: #ff6b6b;
        color: #ff6b6b;
        box-shadow:
            0 2px 8px rgba(138, 43, 226, 0.3),
            inset 0 1px 1px rgba(255, 255, 255, 0.15);
    }

    .categoryButton__kZY9cLAb.active__qlLplOY5 {
        background: linear-gradient(135deg, #ff6b6b, #ff4757);
        border-color: #ff3742;
        color: #ffffff;
        box-shadow:
            0 2px 8px rgba(255, 75, 75, 0.3),
            inset 0 1px 1px rgba(255, 255, 255, 0.2);
    }

    .categoryButton__kZY9cLAb.allItems__H7TIblnw {
        background: linear-gradient(135deg, #e6b800, #ffcc00);
        border-color: #ffd700;
        color: #2d0630;
        font-weight: bold;
        grid-column: 1 / -1;
    }

    .categoryButton__kZY9cLAb.allItems__H7TIblnw:hover,
    .categoryButton__kZY9cLAb.allItems__H7TIblnw:active {
        background: linear-gradient(135deg, #ffcc00, #ffe135);
        border-color: #ffec8b;
        color: #2d0630;
    }

    .categoryButton__kZY9cLAb.allItems__H7TIblnw.active__qlLplOY5 {
        background: linear-gradient(135deg, #ffd700, #ffec8b);
        border-color: #fff9c4;
        color: #2d0630;
    }

    /* Compact text for mobile */
    .categoryButton__kZY9cLAb .categoryIcon__Te2_UbPP {
        margin-right: 3px;
        font-size: 12px;
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.8));
    }
}

/* Very small mobile optimizations */
@media only screen and (max-width: 480px) {
    .categoryRow__bVgW87Bo {
        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
        gap: 4px;
    }

    .categoryButton__kZY9cLAb {
        font-size: 9px;
        padding: 6px 8px;
        min-height: 30px;
    }

    .categorySectionTitle__MpbAYqH9 {
        font-size: 12px;
    }

    .inventoryCategories__t8RKvu_V {
        margin: 10px 5px;
        padding: 12px;
        gap: 8px;
    }
}

/* Animation for smooth transitions */
@keyframes fadeInCategory__lwfo_0rG {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.categorySection__PuwB15yt {
    animation: fadeInCategory__lwfo_0rG 0.3s ease-out;
}

/* Accessibility improvements */
.categoryButton__kZY9cLAb:focus {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
}

.categoryButton__kZY9cLAb:focus-visible {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
}

/* Add subtle glow effect for better visual hierarchy */
.inventoryCategories__t8RKvu_V {
    position: relative;
}

.inventoryCategories__t8RKvu_V::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(255, 107, 107, 0.1));
    border-radius: 14px;
    z-index: -1;
    filter: blur(4px);
}
@media only screen and (min-width: 700px) {
    .trophiesBody {
        display: flex;
        /* background-color: red; */
        width: 100%;
        word-break: normal;
        flex-direction: row;
        margin-top: 10px;
        text-align: left;
        flex-wrap: wrap;

    }

    .selectedHuntingGround {
        display: flex;
        flex-direction: row;
    }

    .selectedHuntingGround .selectedImg {
        width: 400px;
        max-width: 400px;
        height: auto;

        object-fit: contain;

    }


    .huntingGroundsInRegion {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        margin: 10px 0 0 0;

        justify-content: center;
    }

    .gridItemHuntingGroundImg {
        width: 200px;
        margin: 0 10px 0 0;
        border: 1px;
        border-color: rgba(255, 255, 255, 0);
        border-style: solid;

    }

    .gridItemHuntingGroundImg:hover {
        border: 1px;
        border-color: var(--purple);
        border-style: solid;
    }



    .gridItemHuntingGroundImgSelected {
        width: 210px;
        margin: 0 10px 0 0;

        border: 1px;
        border-color: var(--purple);
        border-style: solid;



    }

    .regions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        margin: 20px 0 0 0
    }

    .gridItemRegion {
        display: flex;
        position: relative;
        flex-direction: column;

        .TravelButton {
            display: flex;
            position: relative;
            height: 40px;
            width: 60px;
            top: -90px;
            right: 0px;
            border-image: url(/5860d2d548f21e2abf84.png);
            border-style: solid;
            border-width: 5px;
            border-image-slice: 5 fill;

            text-align: center;
            justify-content: center;
            font-size: 12px;
            z-index: 1;
            padding: 8px;

        }

    }

    .gridItemRegionImg {
        width: 280px;
        height: 160px;
        margin: 0 10px 10px 0;

        border: 1px;
        border-color: rgba(255, 255, 255, 0);
        border-style: solid;
        object-fit: cover;
    }


    .gridItemRegionImg:hover {


        border: 1px;
        border-color: var(--purple);
        border-style: solid;
    }



    .gridItemRegionImgSelected {
        width: 280px;
        height: 160px;
        margin: 0 10px 10px 0;

        border: 1px;
        border-color: var(--purple);
        border-style: solid;

        object-fit: cover;


    }

    .gridItemRegionOverLay {
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-grow: 1;
        bottom: 15px;
        right: 11px;
        justify-content: space-between;
        width: 280px;
        padding-left: 10px;
        background-color: rgba(0, 0, 0, 0.4);

    }

    .selectedHuntingGroundDescription .TravelButton {
        width: 100px;

    }

    .requiredStuff {
        display: flex;
        flex-direction: row;

        align-content: center;
        justify-content: space-around;


    }

    .TravelButtonContainer {
        display: flex;
        flex-direction: row-reverse;

        .TravelBtn {
            display: flex;
            position: relative;
            height: 40px;
            width: 100px;

            border-image: url(/5860d2d548f21e2abf84.png);
            border-style: solid;
            border-width: 5px;
            border-image-slice: 5 fill;

            text-align: center;
            justify-content: center;
            font-size: 12px;
            z-index: 1;
            padding: 8px;

        }

        .TravelBtn:hover {

            color: red;
        }

        .TravelBtn span {
            position: relative;
            margin: 2px 5px 0 5px;
            font-size: 22px;

        }
    }

    .requiredStuff .xp {
        display: flex;
        flex-direction: column;
        color: rgb(170, 0, 255);
        align-content: center;
        justify-content: center;

    }

    .requiredStuff .travel-cost {
        display: flex;
        flex-direction: column;
        color: rgb(255, 215, 0);
        align-content: center;
        justify-content: center;
    }

    .requiredStuff .travel-cost.paid {
        color: rgb(144, 144, 144);
        text-decoration: line-through;
    }

    .requiredStuff .key {
        display: flex;
        flex-direction: column;
        color: rgb(0, 242, 255);
        align-content: center;
        justify-content: center;

    }

    .requiredStuff .label {
        align-content: center;
        justify-content: center;
        font-size: 12px;
        text-transform: uppercase;
        margin: 0 auto 0 auto;
    }

    .requiredStuff .value {
        height: 45px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        align-content: center;
        justify-content: center;
        margin: 0 auto 0 auto;
        font-size: 30px;
    }


    .neededKey {
        width: 40px;
        align-items: center;
        justify-items: center;
        align-content: center;
        justify-content: center;
    }
}
@media only screen and (max-width: 700px) {
    .trophiesBody {
        display: flex;
        /* background-color: red; */
        width: 100%;
        word-break: normal;
        flex-direction: row;
        margin-top: 10px;
        text-align: left;

    }

    .selectedHuntingGround {
        display: flex;
        flex-direction: column;
    }

    .selectedHuntingGround .selectedImg {
        width: 100%;

        height: auto;
        min-height: 180px;
        max-height: 230px;

        margin: 30px 0 0 0;
        object-fit: cover;

    }


    .huntingGroundsInRegion {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        margin: 10px 0 0 0;

        justify-content: center;
    }

    .gridItemHuntingGroundImg {
        width: 125px;
        margin: 0 10px 0 0;
        border: 1px;
        border-color: rgba(255, 255, 255, 0);
        border-style: solid;

    }

    .gridItemHuntingGroundImg:hover {
        border: 1px;
        border-color: var(--purple);
        border-style: solid;
    }



    .gridItemHuntingGroundImgSelected {
        width: 125px;
        margin: 0 10px 0 0;

        border: 1px;
        border-color: var(--purple);
        border-style: solid;



    }

    .regions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px 0 0 0
    }

    .gridItemRegion {
        display: flex;
        position: relative;
        flex-direction: column;
    }

    .gridItemRegionImg {
        width: 280px;
        height: 160px;
        margin: 0 10px 10px 0;

        border: 1px;
        border-color: rgba(255, 255, 255, 0);
        border-style: solid;
        object-fit: cover;
    }


    .gridItemRegionImg:hover {


        border: 1px;
        border-color: var(--purple);
        border-style: solid;
    }



    .gridItemRegionImgSelected {
        width: 280px;
        height: 160px;
        margin: 0 10px 10px 0;

        border: 1px;
        border-color: var(--purple);
        border-style: solid;

        object-fit: cover;


    }

    .gridItemRegionOverLay {
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-grow: 1;
        bottom: 15px;
        right: 11px;
        justify-content: space-between;
        width: 280px;
        padding-left: 10px;
        background-color: rgba(0, 0, 0, 0.4);

    }

    .selectedHuntingGroundDescription .TravelButton {
        width: 100px;

    }

    .requiredStuff {
        display: flex;
        flex-direction: row;

        align-content: center;
        justify-content: space-around;


    }

    .TravelButtonContainer {
        display: flex;
        flex-direction: row-reverse;
    }

    .requiredStuff .xp {
        display: flex;
        flex-direction: column;
        color: rgb(170, 0, 255);
        align-content: center;
        justify-content: center;

    }

    .requiredStuff .travel-cost {
        display: flex;
        flex-direction: column;
        color: rgb(255, 215, 0);
        align-content: center;
        justify-content: center;
    }

    .requiredStuff .travel-cost.paid {
        color: rgb(144, 144, 144);
        text-decoration: line-through;
    }

    .requiredStuff .key {
        display: flex;
        flex-direction: column;
        color: rgb(0, 242, 255);
        align-content: center;
        justify-content: center;

    }

    .requiredStuff .label {
        align-content: center;
        justify-content: center;
        font-size: 12px;
        text-transform: uppercase;
        margin: 0 auto 0 auto;
    }

    .requiredStuff .value {
        height: 45px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        align-content: center;
        justify-content: center;
        margin: 0 auto 0 auto;
        font-size: 30px;
    }


    .neededKey {
        width: 40px;
        align-items: center;
        justify-items: center;
        align-content: center;
        justify-content: center;
    }

}
@media only screen and (min-width: 700px) {
    .grimoireBody {
        display: flex;
        /* background-color: red; */
        flex-direction: column;
        width: 100%;
        word-break: normal;

        margin-top: 10px;
        text-align: left;

    }


    .enemy-grid {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-top: 10px;
        text-align: left;
        flex-wrap: wrap;
        justify-content: space-between;

    }

    .enemy-grid-item {
        display: flex;
        flex-direction: column;
        width: 200px;
        margin-bottom: 20px;

    }

    .enemy-grid-item:hover {
        cursor: pointer;
        transform: scale(1.1);
        transition: transform 0.5s;

    }

    .enemy-grid-item:hover .flavorText {
        display: flex;
        transition: transform 0.5s;

    }

    .enemy-grid-item:hover .enemyImage {
        filter: grayscale(100%) brightness(50%);
        transition: transform 0.5s;

    }


    .enemyImageBackground {
        background-image: url(/3640fce4d7fb39a961f5.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        /* height: 200px; */
        width: 200px;
        border-radius: 10px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .enemyImageBackground_regular {
        background-image: url(/3640fce4d7fb39a961f5.png);
    }

    .enemyImageBackground_midnight {
        background-image: url(/140c1c4c62d166978393.png);
    }

    .enemyImageBackground_nessy {
        background-image: url(/e8cd2d763d3d3214bfc6.png);
    }

    .enemyImageBackground_gift {
        background-image: url(/d853596b5e41afd0e4ed.png);
    }

    .enemyImageBackground_special {
        background-image: url(/562af072e057b33ac1a4.png);
    }

    .enemyImageBackground_monster {
        background-image: url(/6099d4f9061851e19fb0.png);
    }

    .enemyImageBackground_enigma {
        background-image: url(/337e665b433df8978cb4.png);
    }

    .enemyImageBackground_rainbow {
        background-image: url(/c9255661bdb688ab3775.png);
    }

    .enemyImageBackground_secret {
        background-image: url(/ee48bd576fe7e8697f99.png);

    }



    .enemyImage {
        min-width: 100px;
        min-height: 100px;
        width: 200px;
        height: 200px;
        object-fit: cover;
    }

    .enemyType {
        width: 30px;
        height: 30px;


        object-fit: cover;
        margin-right: 5px;
    }


    .imgHidden {

        filter: grayscale(100%) brightness(50%);

    }

    .enemy-description {
        display: flex;
        flex-direction: column;
        /* white-space: nowrap; */
        overflow: break-word;
        text-overflow: ellipsis;

    }

    .enemy-description h3 {
        display: flex;
        flex-direction: row;
        margin-bottom: 4px;
        overflow-wrap: break-word;
    }

    .enemyImageAndRarityContainer {
        display: flex;
        position: relative;
    }

    .descriptionLabel {
        color: rgba(240, 255, 255, 0.759);
        font-size: 10px;
        font-weight: bold;


    }

    .descriptionValue {
        color: azure;
        font-size: 14px;
        font-weight: lighter;
        margin-bottom: 5px;


    }

    .flavorText {
        display: none;
        position: absolute;
        width: 160px;
        height: 160px;
        top: 0;

        background-size: contain;
        pointer-events: none;

        font-size: 12px;
        margin: 20px;
        white-space: wrap;
        overflow: hidden;
        text-overflow: ellipsis;



    }

    .rarity_big {
        display: flex;
        position: absolute;
        width: 200px;
        height: 200px;
        top: 0;
        background-size: contain;
        pointer-events: none;



        border: 5px inset rgba(255, 0, 0, 0.5);
        border-radius: 2px;

        /* filter: blur(2px); */
        top: -5px;
        left: -6px;
    }


    .enemyImagePlaceholder {
        background-image: url(/dfb67e5b407208d5ed45.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 204px;

    }

    /* .rarity_common {
    background-image: url(../../assets/game/inventory/Inventory_Background_Common_128x128.png);
} */

    /* .rarity_rare {
    background-image: url(../../assets/game/inventory/Inventory_Background_Rare_128x128.png);
}

.rarity_epic {
    background-image: url(../../assets/game/inventory/Inventory_Background_Epic_128x128.png);
}

.rarity_legendary {
    background-image: url(../../assets/game/inventory/Inventory_Background_Legendary_128x128.png);
}

.rarity_uncommon {
    background-image: url(../../assets/game/inventory/Inventory_Background_Uncommon_128x128.png);
} */
    select {
        background: #202020;
        color: #ddd;
        padding: 5px;
        border: none;
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /* min-width: 200px; */

        border: 1px solid #9900ff;
    }

    .popupenemy {
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;

        overflow: scroll;

    }

    /* .enemyPopupImage {
        width: 300px;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 20px;
        ;
    } */

    .popup-content {
        /* background-color: #fff; */

        /* border-radius: 10px; */

        width: 451px;
        /* height: 798px; */
        margin-top: 30px;
        margin-bottom: 30px;

        position: relative;
        /* background-image: url("../../assets/game/photoalbum-popup_bg.png");
         */
        background-color: rgb(113 68 181);
        border-radius: 12px;
        background: linear-gradient(145deg, rgb(100, 78, 200) 0%, rgb(90, 50, 150) 100%);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }

    .grimoireFilters {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .grimoireFilterTypes {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        margin-right: 40px;
        width: 200px;
    }

    .FilterCheckbox {
        display: flex;
        width: 50px;
        height: 50px;

        .FilterCheckbox_Label {
            display: flex;
            position: relative;
            top: 50px;
            font-size: 12px;
            text-align: center;
        }
    }

    .TrappedCheckmark {
        background-image: url(/c324a0edda6b6b7aa18b.png);
        background-position: center;
        background-size: contain;

    }

    .TrappedCheckmark_active {
        background-image: url(/6d3c8e2ebd552d4f6648.png);
        background-position: center;
        background-size: contain;

    }

    .DaylightCheckmark {
        background-image: url(/92070d85650f2956ef07.png);
        background-position: center;
        background-size: contain;

    }

    .DaylightCheckmark_active {
        background-image: url(/9c9fe8042c1a3ee8341d.png);
        background-position: center;
        background-size: contain;

    }

    .MidnightCheckmark {
        background-image: url(/e225bf0db3208d26a8d0.png);
        background-position: center;
        background-size: contain;

    }

    .MidnightCheckmark_active {
        background-image: url(/085572f266c0122e4378.png);
        background-position: center;
        background-size: contain;

    }

    .popup-content-content {
        margin: 20px;

        .enemyImageBackground {
            top: 15px;
            left: 30px;
            margin-bottom: 145px;
            width: 210px;
            height: 210px;
            left: 90px;

            .enemyImage {
                width: 200px;
                height: 200px;
            }
        }

        .photoalbum-loot-header {
            display: flex;
            flex-wrap: wrap;
            /* bottom: 90px; */
            position: relative;
            font-size: 16px;
        }

        .photoalbum-loot {
            display: flex;
            flex-wrap: wrap;
            /* bottom: 10px; */
            height: 80px;
            position: relative;
            font-size: 16px;
            width: 90%;
            /* flex-direction: column;
             */
            justify-content: space-around;
            align-content: start;

        }

        .loot-item {
            display: flex;
            flex-direction: row;

            align-items: center;

            overflow: hidden;

            .loot-name {
                margin-right: 5px;
            }
        }

        .photoalbum-loot-image {
            width: auto;
            height: 18px;

        }

        .PhotoAlbumRarityRow {
            display: flex;
            flex-direction: row;

            margin-bottom: 10px;


            .Col {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-right: 20px;
            }


        }

        .flavorTextPopup {
            margin-top: -35px;
            margin-bottom: 10px;
        }

        .Row {
            display: flex;
            flex-direction: row;
            /* justify-content: center; */
            /* align-items: center; */
            margin-bottom: 10px;
        }

        .RowPhotoAlbumInfoBoxes {
            display: flex;
            flex-direction: row;
            /* bottom: 113px; */
            position: relative;
            width: 100%;
            height: 40px;

            .XPRow {
                display: flex;
                flex-direction: row;
                position: absolute;
                left: 5px;
            }

            .GBPRow {
                display: flex;
                flex-direction: row;
                position: absolute;
                left: 105px;
            }

            .PHRow {
                display: flex;
                flex-direction: row;
                position: absolute;
                left: 215px;
            }

            .GHRow {
                display: flex;
                flex-direction: row;
                position: absolute;
                left: 305px;
            }

            .xpimg {
                background-image: url(/f606ea621fd01bdc4e71.png);
                background-position: center;
                background-size: contain;
                width: 35px;
                height: 35px;
            }

            .gbpimg {
                background-image: url(/500e7326436e91275323.png);
                background-position: center;
                background-size: contain;
                width: 35px;
                height: 35px;
            }

            .phuntedimg {
                background-image: url(/1716b88bc0717dc1a398.png);
                background-position: center;
                background-size: contain;
                width: 35px;
                height: 35px;
            }

            .ghuntedimg {
                background-image: url(/64c5bd900090d9cd4a00.png);
                background-position: center;
                background-size: contain;
                width: 35px;
                height: 35px;
            }

            .value {
                text-align: center;
                align-content: center;
            }
        }

    }

    .pictureFrame {
        display: flex;
        position: absolute;
        background-image: url(/a777ace5933a6b3c5b28.png);
        background-position: center;
        background-size: contain;
        width: 280px;
        height: 330px;
        margin: 0 auto;
        background-repeat: no-repeat;
        top: 0px;
        z-index: 2000;
        left: 80px;

        h2 {
            position: absolute;
            display: flex;
            top: 230px;
            left: 55px;
        }
    }

    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        /* border-radius: 50%; */
        padding: 5px 10px;
        cursor: pointer;
        z-index: 3000;
    }
}
@media only screen and (max-width: 700px) {
    .grimoireBody {
        display: flex;
        /* background-color: red; */
        flex-direction: column;
        width: 100%;
        word-break: normal;

        margin-top: 10px;
        text-align: left;
        justify-content: center;

        .dropdown-container {
            display: flex;
            flex-direction: column;
            justify-content: left;
            margin-top: 10px;
            margin-left: 30px;
        }

    }


    .enemy-grid {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-top: 50px;
        text-align: left;
        flex-wrap: wrap;
        justify-content: center;

    }

    .enemy-grid-item {
        display: flex;
        flex-direction: column;
        width: 200px;
        margin-bottom: 20px;

    }

    .enemy-grid-item:hover {
        cursor: pointer;
        transform: scale(1.1);
        transition: transform 0.5s;

    }

    .enemy-grid-item:hover .flavorText {
        display: flex;
        transition: transform 0.5s;

    }

    .enemy-grid-item:hover .enemyImage {
        filter: grayscale(100%) brightness(50%);
        transition: transform 0.5s;

    }



    .enemyImage {
        min-width: 100px;
        min-height: 100px;
        width: 200px;
        height: 200px;
        object-fit: cover;
    }

    .enemyType {
        width: 30px;
        height: 30px;


        object-fit: cover;
        margin-right: 5px;
    }


    .imgHidden {

        filter: grayscale(100%) brightness(50%);

    }

    .enemy-description {
        display: flex;
        flex-direction: column;
        /* white-space: nowrap; */
        overflow: break-word;
        text-overflow: ellipsis;

    }

    .enemy-description h3 {
        display: flex;
        flex-direction: row;
        margin-bottom: 4px;
        overflow-wrap: break-word;
    }

    .enemyImageAndRarityContainer {
        display: flex;
        position: relative;
    }

    .descriptionLabel {
        color: rgba(240, 255, 255, 0.759);
        font-size: 10px;
        font-weight: bold;


    }

    .descriptionValue {
        color: azure;
        font-size: 14px;
        font-weight: lighter;
        margin-bottom: 5px;


    }

    .flavorText {
        display: none;
        position: absolute;
        width: 160px;
        height: 160px;
        top: 0;

        background-size: contain;
        pointer-events: none;

        font-size: 12px;
        margin: 20px;
        white-space: wrap;
        overflow: hidden;
        text-overflow: ellipsis;



    }

    .rarity_big {
        display: flex;
        position: absolute;
        width: 200px;
        height: 200px;
        top: 0;
        background-size: contain;
        pointer-events: none;



        border: 5px inset rgba(255, 0, 0, 0.5);
        border-radius: 2px;

        /* filter: blur(2px); */
        top: -5px;
        left: -6px;
    }


    .enemyImagePlaceholder {

        background-image: url(/dfb67e5b407208d5ed45.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 204px;

    }

    /* .rarity_common {
    background-image: url(../../assets/game/inventory/Inventory_Background_Common_128x128.png);
} */

    /* .rarity_rare {
    background-image: url(../../assets/game/inventory/Inventory_Background_Rare_128x128.png);
}

.rarity_epic {
    background-image: url(../../assets/game/inventory/Inventory_Background_Epic_128x128.png);
}

.rarity_legendary {
    background-image: url(../../assets/game/inventory/Inventory_Background_Legendary_128x128.png);
}

.rarity_uncommon {
    background-image: url(../../assets/game/inventory/Inventory_Background_Uncommon_128x128.png);
} */
    select {
        background: #202020;
        color: #ddd;
        padding: 5px;
        border: none;
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 200px;
        max-width: 100%;
        border: 1px solid #f30c006c;
    }

    /* Ensure filter buttons are visible and tappable on mobile */
    .grimoireFilters {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;


        flex-wrap: wrap;
        justify-content: center;

        .dropdown-container {
            margin-left: 0px;
        }
    }

    .grimoireFilterTypes {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        margin: 6px 0 0 0;
        width: auto;


    }

    .FilterCheckbox {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 6px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .FilterCheckbox .FilterCheckbox_Label {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: #fff;
        text-align: center;
    }

    .TrappedCheckmark {
        background-image: url(/c324a0edda6b6b7aa18b.png);
    }

    .TrappedCheckmark_active {
        background-image: url(/6d3c8e2ebd552d4f6648.png);
    }

    .DaylightCheckmark {
        background-image: url(/92070d85650f2956ef07.png);
    }

    .DaylightCheckmark_active {
        background-image: url(/9c9fe8042c1a3ee8341d.png);
    }

    .MidnightCheckmark {
        background-image: url(/e225bf0db3208d26a8d0.png);
    }

    .MidnightCheckmark_active {
        background-image: url(/085572f266c0122e4378.png);
    }
}
.statImg {
    width: 30px;
    height: auto;
}
.statImg {
    width: 30px;
    height: auto;
}

form {
    display: flex;
    /* background-color: rgba(0, 0, 0, 0.5); */
    flex-direction: column;
    margin: 20px;
    padding: 10px;

}

label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}


Input {
    background-color: rgb(9, 12, 16);
    border: rgb(73, 0, 13);
    border-radius: 2PX;
    border-width: 1px;
    border-style: solid;
    color: black;
    margin: 5px 0 5px 0;
    min-height: 20px;
    padding: 1px 0 0 5px;


}

input::placeholder {
    color: lightgray;

    font-family: "Luckiest Guy", serif;
    /* replace with desired color value */
}
.modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.install-prompt-overlay {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  z-index: 1000;
}

.install-prompt-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.install-prompt-buttons button {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.highlight {
    background-color: #900c0a;
}


.ladderBody {
    display: flex;
    justify-content: center;
    width: 100%;
}

table {
    /* rest of your styles */
}

table th {
    min-width: 100px;
    background-color: #f30b00;
}

table th:first-child,
table td:first-child {
    text-align: center;
    min-width: 70px;
}


table th:nth-child(2),
table td:nth-child(2) {
    min-width: 100px;
}

table th:nth-child(3),
table td:nth-child(3),
table th:nth-child(4),
table td:nth-child(4) {
    text-align: right;
}

.ladderBody {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

table {
    border-collapse: collapse;
    color: #f5f5f5;

    font-family: "Luckiest Guy", serif;
    /* Gothic-style font */
    background-color: #3333332e;
}

.playerLadderAvatar {
    width: 100px;
    height: auto;


}

table th,
table td {

    padding: 10px;
}


table tr:nth-child(even) {
    background-color: #55555529;
    /* Slightly lighter than the table background for contrast */
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-direction: row;
    justify-content: space-evenly;
}
@media only screen and (min-width: 700px) {
    .premiumShopHeaderBody {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        flex-grow: 1;

        justify-content: flex-start;
        overflow: visible;
        margin-bottom: 400px;
    }

    .prevNextBuy {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .diamondDealsRowBody {


        display: flex;
        flex-direction: column;
        max-width: 100%;

    }

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

        .statsBody {
            height: 150px;
        }


    }

    .ToolTipWithStats {
        display: flex;
        flex-direction: column;
        position: relative;

    }

    .itemType {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        color: grey;
    }

    .diamondDeal_ImageContainer {
        display: flex;
        flex-direction: row;
    }

    .diamondDeal_Image {
        display: flex;
        flex-direction: row;
        width: 120px;
        height: 120px;

    }

    .diamondDeal_Description {
        display: flex;
        flex-direction: column;
        justify-content: start;
        margin: 10px;
        font-size: 14px;
    }

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

        background: linear-gradient(135deg, #4a0e4e, #2d0831);
        border: 3px solid #7b2d93;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(123, 45, 147, 0.3);
        padding: 15px;
        margin: 10px;

        background-image:
            radial-gradient(circle at 20% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
    }

    .specialOffer h2 {
        text-align: center;
    }


    .dealItemsGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        margin: 10px;
    }

    .dealItem {
        background-color: rgba(0, 0, 0, 0.226);
        border: 2px solid black;

    }

    .dealItem .itemImg {
        width: 100px;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .dealItemName {
        font-size: 12px;
        text-align: center;

    }

    .shopHeader {
        display: flex;
        flex-direction: row;
    }

    .diamondDealsRow {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 10px;
    }




    /* schräg start*/


    .dealItem {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .itemImgContainer {
        position: relative;
        width: 100px;
        /* Set appropriate width */
        height: 100px;
        /* Set appropriate height */
    }

    .itemImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .quantityOverlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        /* Adjust size as needed */
        color: white;
        /* Choose text color */
        font-weight: bold;
        transform: rotate(-35deg);
        /* Adjust angle */
        /* background-color: rgba(0, 0, 0, 0.5); */
        /* Semi-transparent overlay */
        pointer-events: none;
        /* Allows clicking on elements below */
    }

    .promotionalOverlay {
        position: absolute;
        top: -5px;
        left: -5px;
        z-index: 2;
        padding: 4px 12px;
        font-size: 12px;
        font-weight: bold;
        color: white;
        background: linear-gradient(135deg, #ff4444, #cc0000);
        border-radius: 0 0 8px 0;
        transform: rotate(-15deg);
        transform-origin: top left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        pointer-events: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .dealItemName {
        margin-top: 8px;
        z-index: 1;
    }

    .YellowButton {
        margin-top: 5px;
        padding: 5px 10px;
        background-color: yellow;
        cursor: pointer;
        z-index: 2;
    }

    /* schräg ende*/

    .subscriptionDealContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 10px;

        .dealItem {
            margin: 0px;
        }

        .itemImg {
            width: 70px;
        }

        .specialOffer {
            margin: 10px;
            height: 400px;
            background: linear-gradient(135deg, #3a0d3e, #1f0624);
            border: 2px solid #9333ea;
            box-shadow: 0 0 15px rgba(147, 51, 234, 0.4);
        }
    }

    .subscriptionDealSilver .specialOffer {
        background: linear-gradient(135deg, #374151, #1f2937);
        border: 2px solid #9ca3af;
        box-shadow: 0 0 15px rgba(156, 163, 175, 0.3);
    }

    .subscriptionDealGold .specialOffer {
        background: linear-gradient(135deg, #451a03, #292524);
        border: 2px solid #f59e0b;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    }

    .subscriptionDealPlatinum .specialOffer {
        background: linear-gradient(135deg, #6b7280, #374151);
        border: 2px solid #d1d5db;
        box-shadow: 0 0 20px rgba(209, 213, 219, 0.4);
    }

    .shopHeader .specialOffer {
        background: linear-gradient(135deg, #4c1d95, #312e81);
        border: 3px solid #a855f7;
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);

    }

    .hexDealsRowBody {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 10px;
    }

    .hexDealsRow {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 10px;
        flex-wrap: wrap;
    }


    .avatarDealsRowBody {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: 10px;
    }

    .avatarDealsRow {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin: 10px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .avatarDealsRow>* {
        flex: 0 0 calc(16.666% - 10px);
        max-width: calc(16.666% - 10px);
    }


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

        justify-content: center;
        align-items: center;

        .AvatarImageGrid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 30px;
            margin: auto;

        }

        .AvatarImageCollage1 {
            width: 200px;
            height: 200px;
            background-image: url(/c785cc0cd2e7fddcff40.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage2 {
            width: 200px;
            height: 200px;
            background-image: url(/1bb5a91c1b0ce20fd981.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage3 {
            width: 200px;
            height: 200px;
            background-image: url(/7fd7633c4fc80b541698.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage4 {
            width: 200px;
            height: 200px;
            background-image: url(/45bfca9662d1906c8b73.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage5 {
            width: 200px;
            height: 200px;
            background-image: url(/ede7881e69da0aa650eb.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage6 {
            width: 200px;
            height: 200px;
            background-image: url(/58e7727c6e05ef060e93.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage7 {
            width: 200px;
            height: 200px;
            background-image: url(/d189a8f2c3adb7ec3ec6.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage8 {
            width: 200px;
            height: 200px;
            background-image: url(/7f1bbc7df43f3ea55b18.png);
            background-position: center;
            background-size: cover;
        }
    }
}
@media only screen and (max-width: 700px) {
    .premiumShopHeaderBody {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        flex-grow: 1;

        justify-content: flex-start;
        overflow: visible;
        /* margin-bottom: 400px; */
    }


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


    }

    .ToolTipWithStats {
        display: flex;
        flex-direction: column;
        position: relative;

    }

    .itemType {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        color: grey;
    }

    .diamondDeal_ImageContainer {
        display: flex;
        flex-direction: row;
    }

    .diamondDeal_Image {
        display: flex;
        flex-direction: row;
        width: 120px;
        height: 120px;

    }

    .diamondDeal_Description {
        display: flex;
        flex-direction: column;
        justify-content: start;
        margin: 10px;
        font-size: 14px;
    }

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

        background: linear-gradient(135deg, #4a0e4e, #2d0831);
        border: 3px solid #7b2d93;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(123, 45, 147, 0.3);
        padding: 15px;
        margin: 10px;

        background-image:
            radial-gradient(circle at 20% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
    }

    .specialOffer h2 {
        text-align: center;
    }


    .dealItemsGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        margin: 10px;
    }

    .dealItem {
        background-color: rgba(0, 0, 0, 0.226);
        border: 2px solid black;

    }

    .dealItem .itemImg {
        width: 100px;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .dealItemName {
        font-size: 12px;
        text-align: center;

    }

    .shopHeader {
        display: flex;
        flex-direction: column-reverse;
        max-width: 90vw;
    }

    .diamondDealsRow {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 10px;
        flex-wrap: wrap;
    }

    .diamondDealsRowBody {


        display: flex;
        flex-direction: column;
        max-width: 90vw;

    }


    /* schräg start*/


    .dealItem {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .itemImgContainer {
        position: relative;
        width: 100px;
        /* Set appropriate width */
        height: 100px;
        /* Set appropriate height */
    }

    .itemImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .quantityOverlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        /* Adjust size as needed */
        color: white;
        /* Choose text color */
        font-weight: bold;
        transform: rotate(-35deg);
        /* Adjust angle */
        /* background-color: rgba(0, 0, 0, 0.5); */
        /* Semi-transparent overlay */
        pointer-events: none;
        /* Allows clicking on elements below */
    }

    .promotionalOverlay {
        position: absolute;
        top: -5px;
        left: -5px;
        z-index: 2;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: bold;
        color: white;
        background: linear-gradient(135deg, #ff4444, #cc0000);
        border-radius: 0 0 6px 0;
        transform: rotate(-15deg);
        transform-origin: top left;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        pointer-events: none;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .dealItemName {
        margin-top: 8px;
        z-index: 1;
    }

    .YellowButton {
        margin-top: 5px;
        padding: 5px 10px;
        background-color: yellow;
        cursor: pointer;
        z-index: 2;
    }

    /* schräg ende*/

    .subscriptionDeals {
        max-width: 90vw;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .subscriptionDealContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 10px;
        flex-wrap: wrap;

        .dealItem {

            margin: 0px;
        }

        .itemImg {
            width: 70px;
        }

        .specialOffer {
            margin: 10px;
            /* height: 400px; */
        }
    }

    .subscriptionDealSilver .specialOffer {
        background: linear-gradient(135deg, #374151, #1f2937);
        border: 2px solid #9ca3af;
        box-shadow: 0 0 15px rgba(156, 163, 175, 0.3);
    }

    .subscriptionDealGold .specialOffer {
        background: linear-gradient(135deg, #451a03, #292524);
        border: 2px solid #f59e0b;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    }

    .subscriptionDealPlatinum .specialOffer {
        background: linear-gradient(135deg, #6b7280, #374151);
        border: 2px solid #d1d5db;
        box-shadow: 0 0 20px rgba(209, 213, 219, 0.4);
    }

    .shopHeader .specialOffer {
        background: linear-gradient(135deg, #4c1d95, #312e81);
        border: 3px solid #a855f7;
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    }

    .hexDealsRowBody {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 10px;
    }

    .hexDealsRow {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 10px;
        flex-wrap: wrap;
    }


    .avatarDealsRowBody {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 10px;
    }

    .avatarDealsRow {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 10px;
        flex-wrap: wrap;
    }


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

        justify-content: center;
        align-items: center;

        .AvatarImageGrid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 30px;
            margin: auto;

        }

        .AvatarImageCollage1 {
            width: 200px;
            height: 200px;
            background-image: url(/c785cc0cd2e7fddcff40.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage2 {
            width: 200px;
            height: 200px;
            background-image: url(/1bb5a91c1b0ce20fd981.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage3 {
            width: 200px;
            height: 200px;
            background-image: url(/7fd7633c4fc80b541698.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage4 {
            width: 200px;
            height: 200px;
            background-image: url(/45bfca9662d1906c8b73.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage5 {
            width: 200px;
            height: 200px;
            background-image: url(/ede7881e69da0aa650eb.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage6 {
            width: 200px;
            height: 200px;
            background-image: url(/58e7727c6e05ef060e93.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage7 {
            width: 200px;
            height: 200px;
            background-image: url(/d189a8f2c3adb7ec3ec6.png);
            background-position: center;
            background-size: cover;
        }

        .AvatarImageCollage8 {
            width: 200px;
            height: 200px;
            background-image: url(/7f1bbc7df43f3ea55b18.png);
            background-position: center;
            background-size: cover;
        }
    }
}
.shopCallbackPage {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* min-height: 100vh; */
  flex-grow: 1;

  justify-content: center;
  align-items: center;
  background-image: url(/c1a7d6b714bdbd49102b.jpg);
  background-position: center;
  background-size: cover;
  overflow-y: auto;
}


.shopCallbackTopImage {
  position: relative;
  width: 120vw;
  height: 50vh;




  background-image: url(/b99a88f4f4cdabe50577.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

}

.shopCallbackContainer {
  display: flex;
  flex-direction: column;
  z-index: 1;
  /* width: 550px; */
  min-height: 150px;


  text-align: center;
  position: relative;
  /* bottom: 100px; */

  border-image: url(/6040b3398bf7efa6feb2.png);
  border-style: solid;
  border-width: 50px;
  border-image-slice: 60 fill;





}

.support {
  bottom: 20px;
}

.shopCallbackThankYouImage {
  position: relative;
  width: 100%;
  height: 200px;




  background-image: url(/feb3a5b40a0eded5fe1a.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

}
/* GhostTrappers Color Scheme */
:root {
    /* Primary Colors */
    --ghost-primary: #2D1B69;
    /* Deep purple */
    --ghost-secondary: #8B5FBF;
    /* Medium purple */
    --ghost-accent: #00E5FF;
    /* Cyan glow */

    /* Dark Theme */
    --ghost-bg-primary: #0A0A0A;
    /* Almost black */
    --ghost-bg-secondary: #1A1A1A;
    /* Dark gray */
    --ghost-surface: #2A2A2A;
    /* Card backgrounds */

    /* Text Colors */
    --ghost-text-primary: #FFFFFF;
    --ghost-text-secondary: #CCCCCC;
    --ghost-text-muted: #888888;

    /* Interactive */
    --ghost-button-primary: #8B5FBF;
    --ghost-button-hover: #A374D4;
}

/* Mobile Sidebar Container - Only visible on mobile */
.sidebarContainer__VcyGQUbA {
    display: none;
}

/* Show only on mobile devices */
@media screen and (max-width: 700px) {
    .sidebarContainer__VcyGQUbA {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: linear-gradient(180deg, var(--ghost-bg-primary) 0%, var(--ghost-bg-secondary) 100%);
        border-right: 2px solid var(--ghost-primary);
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
        z-index: 9998;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebarContainer__VcyGQUbA.open__yAmGp7c7 {
        transform: translateX(0);
    }

    /* Toggle Button */
    .sidebarToggle__wKdyGv4w {
        position: fixed;
        top: 15px;
        left: 15px;
        width: 40px;
        height: 40px;
        background: var(--ghost-bg-secondary);
        border: 2px solid var(--ghost-primary);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 9999;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .sidebarToggle__wKdyGv4w:hover {
        background: var(--ghost-primary);
        border-color: var(--ghost-accent);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        transform: scale(1.05);
    }

    .sidebarToggle__wKdyGv4w.open__yAmGp7c7 {
        left: 240px;
        background: var(--ghost-accent);
        border-color: var(--ghost-accent);
        color: var(--ghost-bg-primary);
    }

    .sideBarButton__n9xGq2j4 {
        width: 24px;
        height: 24px;
        color: var(--ghost-text-primary);
        transition: color 0.3s ease;
    }

    .sidebarToggle__wKdyGv4w.open__yAmGp7c7 .sideBarButton__n9xGq2j4 {
        color: var(--ghost-bg-primary);
    }

    /* Sidebar Content */
    .gameSidebar__HSQAc_j5 {
        display: flex;
        flex-direction: column;
        height: 100%;
        /* padding: 60px 0 20px 0; */
        /* Top padding to avoid toggle button */
        background: linear-gradient(180deg, var(--ghost-bg-primary) 0%, var(--ghost-bg-secondary) 100%);
    }

    /* GhostTrappers Logo */
    .ghostTrappersLogo__rK691f7C {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100px;

        background-image: url(/65181b1ddd2844101dc4.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin: 8px 0 15px 0;
        filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
        transition: filter 0.3s ease;
    }

    .ghostTrappersLogo__rK691f7C:hover {
        filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.6));
    }

    /* Player Row */
    .PlayerRow__nnLA2xZS {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 10px;
    }

    .PlayerProfile__VKipJ0BB {
        flex: 1;
    }

    .ProfileDetails__NJmZ6VA3 {
        display: flex;
        flex-direction: column;
    }

    .UserName__wCQWm2hn {
        font-size: 16px;
        font-weight: bold;
        color: var(--ghost-text-primary);
        margin-bottom: 4px;
    }

    .UserName__wCQWm2hn a {
        color: var(--ghost-text-primary);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .UserName__wCQWm2hn a:hover {
        color: var(--ghost-accent);
        text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
    }

    .UserRank__iZNMHSQ1 {
        font-size: 12px;
        color: var(--ghost-text-secondary);
        margin-bottom: 6px;
    }

    .UserLevelBackground__BYfOUzsv {
        width: 100%;
        height: 12px;
        background: var(--ghost-bg-primary);
        border: 1px solid var(--ghost-primary);
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .UserLevel__MBGneMJH {
        height: 100%;
        background: linear-gradient(90deg, var(--ghost-primary), var(--ghost-accent));
        position: relative;
        transition: width 0.3s ease;
    }

    .UserLevelText__A6UV1_ph {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .UserLevelTextFont__i1Upuy2H {
        font-size: 11px;
        color: var(--ghost-text-primary);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(0%, -50%);
        white-space: nowrap;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        font-weight: 500;
        min-width: -webkit-max-content;
        min-width: max-content;
    }

    .UserLadderRank__wZpTXpNC {
        margin-bottom: 8px;
    }

    .UserLadderRankText__FFIxK7mD {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: var(--ghost-text-secondary);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .UserLadderRank__wZpTXpNC a {
        color: inherit;
        text-decoration: none;
    }

    .UserLadderRank__wZpTXpNC a:hover .UserLadderRankText__FFIxK7mD {
        color: var(--ghost-accent);
    }

    .ItemImg__B4QX094z {
        width: 16px;
        height: 16px;
    }

    .marginRight5px__VQ7XGebk {
        margin-right: 5px;
    }

    /* Profile Pictures */
    .ProfilePic__g7yNM40S {
        position: relative;
        /* width: 60px; */
        height: 100px;
        margin-left: 10px;
    }

    .ProfilePicImage__SxoAH_uy {
        /* width: 60px; */
        height: 100px;
        /* border: 2px solid var(--ghost-primary);
        border-radius: 8px; */
    }

    .ProfileAvatarImage__LZnyKku4 {
        position: absolute;
        top: -82px;
        right: 8px;
        width: 60px;
        height: 60px;
        /* border: 1px solid var(--ghost-accent);
        border-radius: 4px; */
    }

    .ProfileCoinImage__gubBP7mq {
        position: absolute;
        bottom: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
        /* border: 1px solid var(--ghost-accent);
        border-radius: 4px; */
    }

    /* Spacers */
    .spacer__ZhCtjCIh {
        height: 15px;
    }

    .spacer50__scvQdDuR {
        height: 50px;
    }

    /* Premium Shop Link */
    .gamehomenewspremiumshop__MAe4Nkq4 {
        display: flex;
        margin: 0 auto;
        filter: drop-shadow(0 0 8px rgba(139, 95, 191, 0.4));
        transition: filter 0.3s ease;
    }

    .gamehomenewspremiumshop__MAe4Nkq4:hover {
        filter: drop-shadow(0 0 12px rgba(139, 95, 191, 0.6));
    }

    /* Navigation */
    .sideBarNavigation__C3aRvD85 {
        display: flex;
        flex-direction: column;
        margin: 8px 0 8px 12px;
        font-size: 15px;
    }

    .sideBarNavigation__C3aRvD85 a {
        padding: 8px 0;
        font-weight: 500;
        border-bottom: 1px solid rgba(45, 27, 105, 0.2);
        transition: all 0.3s ease;
        color: var(--ghost-text-secondary);
        text-decoration: none;
        font-size: 14px;
        line-height: 1.3;
    }

    .sideBarNavigation__C3aRvD85 a:hover {
        color: var(--ghost-accent);
        padding-left: 8px;
        background-color: rgba(0, 229, 255, 0.1);
        text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
    }

    .sidebarSectionTitle__hBe585ZG {
        font-size: 11px;
        color: var(--ghost-accent);
        text-transform: uppercase;
        font-weight: bold;
        margin: 15px 0 6px 0;
        padding: 6px 0;
        border-top: 2px solid var(--ghost-primary);
        letter-spacing: 1.2px;
        position: relative;
        text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
    }

    .sidebarSectionTitle__hBe585ZG:first-child {
        border-top: none;
        margin-top: 6px;
    }

    /* Travel Section */
    .Travel__ePt6J8mG {
        margin: 0 10px;
        background: var(--ghost-surface);
        border-radius: 8px;
        padding: 10px;
        border: 1px solid var(--ghost-primary);
    }

    .LocationImage__s1cTAmDa {
        width: 100%;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 8px;
    }

    .LocationName__iac7HbLG {
        font-size: 14px;
        color: var(--ghost-text-primary);
        text-align: center;
        margin-bottom: 8px;
        font-weight: bold;
    }

    .TravelButton__YuvlHA24 {
        display: block;
        width: 100%;
        padding: 8px;
        background: var(--ghost-button-primary);
        color: var(--ghost-text-primary);
        text-align: center;
        text-decoration: none;
        border-radius: 6px;
        font-weight: bold;
        font-size: 12px;
        transition: all 0.3s ease;
        border: 1px solid var(--ghost-primary);
    }

    .TravelButton__YuvlHA24:hover {
        background: var(--ghost-button-hover);
        border-color: var(--ghost-accent);
        box-shadow: 0 2px 8px rgba(139, 95, 191, 0.3);
        transform: translateY(-1px);
    }
}

/* Hide on desktop */
@media screen and (min-width: 701px) {

    .sidebarContainer__VcyGQUbA,
    .sidebarToggle__wKdyGv4w {
        display: none !important;
    }
}
.postserviceLogo {
    background-image: url(/13664bd4e23df0bc6dd2.png);
}
.adminNavigation {
    display: flex;
    /* flex-grow: 1; */
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.5);
    height: auto;
    align-content: center;

    font-size: 20px;

    padding: 0 10px 0 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.adminNavigation .NavLink {
    background-color: rgba(153, 0, 255, 0.3);
    padding: 0 10px 0 10px;
    margin: 5px 0 5px 0;

}

.adminpage {
    display: flex;
    width: 100%;
    background-image: url(/c1a7d6b714bdbd49102b.jpg);
    background-position: top;
    background-size: cover;


}

.adminpage Input {
    border-color: beige;
}


.adminpage Label {
    margin: 2px;
}


.adminpagecontent {
    display: flex;


    width: 884px;


    flex-direction: column;
    /* justify-content: flex-start; */
    /* align-items: center; */
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;

}

/* Settings */
.admin-settingspage {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: calc(100vh - 120px);
    /* Account for admin navigation (~70px) + footer (~50px) */
    min-height: 0;
    /* Allow flex children to shrink */
}


.admin_details {
    padding: 20px;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    flex-direction: column;
    flex: 3;
    min-height: 0;
    /* Allow flex item to shrink below content size */
    overflow-y: auto;
    /* Allow scrolling if content exceeds available space */
}




.admin_details label {
    display: flex;
    flex-direction: column;
    font-size: 14px;

}

.admin_details Input[type="checkbox"] {
    align-self: flex-start;

}

.adminPreviewImage {
    width: 200px;
    height: auto;
}

.admin_list {
    display: flex;
    flex-direction: column;
    min-width: 50px;
    max-width: 150px;
    margin-right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    flex: 1;
    min-height: 0;
    /* Allow flex item to shrink below content size */
    /* Removed fixed height to make it dynamic based on details content */
    overflow: scroll;
    /* Prevent overflow on container */
}

.admin_list_header {
    flex-shrink: 0;
    /* Don't shrink the header */
    padding: 10px 5px;
    border-bottom: 1px solid rgba(153, 0, 255, 0.3);
}

.admin_list_header button {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    background-color: rgba(153, 0, 255, 0.6);
    border: 1px solid rgba(153, 0, 255, 0.8);
    color: white;
    cursor: pointer;
    border-radius: 3px;
}

.admin_list_header button:hover {
    background-color: rgba(153, 0, 255, 0.8);
}

.admin_list_header select {
    width: 100%;
    margin-top: 5px;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(153, 0, 255, 0.5);
    color: white;
    border-radius: 3px;
}

.admin_list_content {
    flex: 1;
    /* Take remaining space */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 0;
}

.admin_list .listElement {
    background-color: rgba(153, 0, 255, 0.5);
    cursor: pointer;
    padding: 2px;

    margin: 2px 10px 2px 2px;
}

.admin_list .listElement:hover {
    background-color: rgba(153, 0, 255, 0.5);
    margin-right: 10px;
    cursor: pointer;
}

.labelBackground1 {
    background-color: rgba(153, 0, 255, 0.5);

}

.labelBackground1 label {
    padding: 0 0 0 20px;
}

.labelBackground2 {
    background-color: rgba(0, 0, 200, 0.5);

}

.labelBackground2 label {
    padding: 0 0 0 20px;
}

Label Input {
    margin: 0 20px 0 20px;
}

Label Select {
    margin: 0 20px 0 20px;
}

Label Textarea {
    margin: 0 20px 0 20px;
}


.statEntryDefinition {
    display: flex;
    flex-direction: row;
}

.statEntryDefinitionValue {
    display: flex;
    flex-direction: column;
}

.statEntryDefinitionValue Label {
    font-size: 10px;
}

.inoutAndUnitSymbol {
    display: flex;
    flex-direction: row;
}

.gridItem {
    display: flex;
    flex-direction: column;
    max-width: 100px;
    max-height: auto;
    padding: 4px;
    margin: 2px;
    background-color: rgba(0, 0, 0, 0.5);
}

.image-wrapper Img {
    max-width: 100%;
    max-height: 100%;

}

.gridItem P {
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
}

.gridItem label {
    margin: 0;
    padding: 0;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.image200 {
    width: 200px;
    height: auto;
}

.floatingDelTopRight {

    position: absolute;
    top: 0px;
    right: 0px;
    /* transform: translate(-50%, -50%); */
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    /* padding: 10px 20px; */
    margin: 0;
    cursor: pointer;
    background-color: red;
    width: 25px;
    height: 25px;
}

Button {
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 2px;

    /* Takes full width of parent */
    min-width: 50px;
    /* Minimum width it can shrink to */

}

.column {
    display: flex;
    flex-direction: column;
}
/* The Modal (background) */
.modal {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* overflow: auto; */
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content */
.modal-content {
    position: relative;
    margin: 5% auto;
    padding: 20px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #494949;
    border-radius: 8px;
}

/* Modal Header */
.modal-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #666;
    padding-bottom: 15px;
}

.modal-header h2 {
    margin: 0 0 10px 0;
    color: #fff;
    font-family: "Luckiest Guy", serif;
}

/* Search Container */
.search-container {
    margin-bottom: 10px;
}

.search-input {
    width: 100%;
    max-width: 400px;
    padding: 10px 15px;
    border: 2px solid #666;
    border-radius: 25px;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input:focus {
    border-color: #4CAF50;
}

.search-input::placeholder {
    color: #aaa;
}

/* Results Info */
.results-info {
    color: #aaa;
    font-size: 14px;
    margin-top: 5px;
}

/* Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 20px;
}

.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Loading Indicator */
.loading-indicator {
    text-align: center;
    padding: 40px;
    color: #fff;
}

/* Grid layout for items */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    min-height: 200px;
    /* Ensure minimum height for loading states */
    padding: 1rem 0;
}

.grid-container img {
    width: 100%;
}

.gridItem {
    min-height: 40px;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.gridItem:hover {
    border-color: #4CAF50;
    background-color: #666;
    transform: translateY(-2px);
}

.gridItem p {
    margin: 8px 0 0 0;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    word-wrap: break-word;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #666;
}

.pagination-btn {
    padding: 8px 16px;
    border: 2px solid #666;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    border-color: #4CAF50;
    background-color: #4CAF50;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    color: #fff;
    font-weight: bold;
    min-width: 120px;
    text-align: center;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 40px;
    color: #aaa;
    font-style: italic;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal-content {
        margin: 2% auto;
        width: 95%;
        max-height: 95vh;
        padding: 15px;
    }

    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.5rem;
    }

    .search-input {
        max-width: 100%;
    }

    .pagination {
        flex-direction: column;
        gap: 10px;
    }

    .pagination-info {
        min-width: auto;
    }
}
.admin-user {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.user-list {
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    flex-direction: column;

    margin-right: 10px;
    width: 150px;

}

.user-details {
    padding: 20px;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    flex-direction: column;
    flex-grow: 1;

}

.user-details label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

button {
    margin: 10px;
}

.deleteUser {
    background-color: red;
    color: white;
    width: 120px;
}

.adminUserInventoryItem {
    width: 100px;
    height: 100px;
    ;
}
.admin-items {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}


.admin_item_details {
    padding: 20px;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    flex-direction: column;
    flex-grow: 1;

}

.admin_item_details label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.adminPreviewImage {
    width: 200px;
    height: auto;
}
/* The Modal (background) */
.modal {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content */
.modal-content {
    position: relative;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    max-height: 80vh;
    overflow-y: auto;
    background-color: #494949;
}

/* Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Grid layout for items */
/* .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
} */

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    max-height: 400px;
    /* Adjust this as per your requirement */
    overflow-y: auto;
    /* Makes the container scrollable */
    padding: 1rem;
}

.grid-container img {
    width: 100%;
}

/* .grid-container .gridItem :hover {
    display: flex;
    background-color: red;
} */
.activateAccountPage {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* min-height: 100vh; */
  flex-grow: 1;

  justify-content: center;
  align-items: center;
  background-image: url(/c1a7d6b714bdbd49102b.jpg);
  background-position: center;
  background-size: cover;
  overflow-y: auto;
}


.loginTopImage {
  position: relative;
  width: 300px;
  height: 150px;




  background-image: url(/b99a88f4f4cdabe50577.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

}



.loginTopImageSmall {

  position: relative;
  width: auto;

  height: 550px;


}

/* 
.loginContainer {
  display: flex;
  flex-direction: column;
  z-index: 1;
  width: 250px;
  min-height: 350px;


  text-align: center;
  position: relative;
  /* bottom: 100px; */

/* border-image: url("../assets/Box.png");
border-style: solid;
border-width: 20px;
border-radius: 10px;



border-image-slice: 20 18 18 18 fill;

} */

*/ .linkForgottPW {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 5px 0 5px 0;
  font-size: 12px;
  color: white;
  cursor: pointer;
}





Input {
  background-color: rgb(9, 12, 16);
  border: black;
  border-radius: 2PX;
  border-width: 1px;
  border-style: solid;
  color: black;
  margin: 5px 0 5px 0;
  min-height: 20px;
  padding: 1px 0 0 5px;


}

input::placeholder {
  color: lightgray;
  font-family: 'Dante', sans-serif;
  /* replace with desired color value */
}

/* 
.RedButton {
  display: flex;
  border-image: url("../assets/Buttons/Button_Red_32x32.png");
  border-style: solid;
  border-width: 5px;
  
  
border-image-slice: 8 fill;
min-height: 10px;
min-width: 50px;
color: whitesmoke;
font-family: Dante;
font-size: 18px;
text-align: center;
padding: 4px 10px 0px 10px;
margin: 0 10% 0 10%;
justify-content: center;
align-items: center;

}

*/
Form {
  display: flex;
  flex-direction: column;
  padding: 0 20% 0 20%;
  gap: 0px;

  align-items: center;


}
@font-face {
  font-family: 'Dante';
  /* The name you want to give to your font family */
  src: url(/7f27da0c7d0d3a51cf2a.otf) format('opentype');
  /* Adjust the path to your OTF font file */
}

:root {
  --purple: rgba(153, 0, 255, 255);
}

.luckiest-guy-regular {
  font-family: "Luckiest Guy", serif;
  font-weight: 400;
  font-style: normal;
}

a {
  color: #ddd;
  text-decoration: none;

}

a:hover {
  color: var(--purple);

  text-decoration: none;
}

#footer {
  margin: auto auto 10px auto;
  text-align: center;

}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: whitesmoke;
  text-align: center;
  /* font-family: 'Dante', sans-serif; */
  font-family: "Luckiest Guy", serif;
  font-weight: lighter;
  font-size: 30px;
  color: var(--purple);
  text-transform: uppercase;

  text-shadow: 2px 2px 2px black,
    2px -2px 2px black,
    -2px 2px 2px black,
    -2px -2px 2px black;
}


h2 {
  margin-top: 30px;
  font-size: 20px;
  text-align: left;
}

h3 {
  font-size: 16px;
  text-align: left;

}

h10 {
  font-size: 10px;
  /* padding-top: 10px; */
  padding-bottom: 10px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 5px;
}


p {
  padding-left: 20px;
  color: #ddd;
}

.backToGame {
  height: 100px;
  width: 100px;
  position: fixed;
  top: 25px;
  left: 25px;
}

body {
  -webkit-user-select: none;
          user-select: none;
  background-color: black;
  font-family: "Luckiest Guy", serif;
}