/* 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 */
}

.maincontentWithPtsIndicator {
  padding-top: 12px;
}

.ptsTopMicroBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  line-height: 10px;
  padding: 1px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.2px;
  color: #fff8cf;
  background-color: rgba(155, 0, 0, 0.95);
  border-bottom: 1px solid rgba(255, 240, 200, 0.75);
}

.ptsTopMicroBanner:hover {
  color: #ffffff;
  background-color: rgba(190, 0, 0, 0.98);
}



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;
  position: relative;
  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;
}

.server-action-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  min-width: 136px;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 0 14px 1px 14px;
  overflow: hidden;
  border: 1px solid rgba(102, 231, 255, 0.62);
  border-radius: 6px;
  border-image: none;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(50, 24, 108, 0.98), rgba(26, 15, 70, 0.98) 72%),
    var(--gt-color-panel-inner, #1a0f46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -12px 18px rgba(0, 0, 0, 0.38),
    0 0 16px rgba(102, 231, 255, 0.18);
  color: var(--gt-color-text-primary, #ffffff);
  cursor: pointer;
  flex-wrap: nowrap;
  font-family: var(--gt-font-heading, "Londrina Solid", "Luckiest Guy", serif);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, filter 140ms ease, box-shadow 140ms ease;
  white-space: nowrap;
}

.server-action-button.YellowButton,
.server-action-button.PurpleButton,
.server-action-button.BlueButton {
  border-width: 1px;
  border-image: none;
  padding: 0 14px 1px 14px;
  margin: 0;
}

.server-action-button__content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-action-button .quantity {
  display: inline-flex;
  align-items: center;
  color: inherit;
  padding-left: 0;
  font-size: 0.85em;
  line-height: 1;
}

.server-action-button:hover {
  color: var(--gt-color-accent-cyan, #66e7ff);
  transform: none;
}

.server-action-button:not(:disabled):hover {
  border-color: rgba(240, 76, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(57, 30, 118, 0.98), rgba(31, 14, 82, 0.99) 72%),
    var(--gt-color-panel-700, #24155a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 18px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(240, 76, 255, 0.26);
}

.server-action-button:focus-visible {
  outline: 2px solid var(--gt-color-accent-cyan, #66e7ff);
  outline-offset: 2px;
}

.server-action-button:disabled {
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.server-action-button:disabled:hover,
.server-action-button[aria-busy="true"]:hover {
  transform: none;
}

.server-action-button--pending,
.server-action-button--pending:disabled {
  border-color: rgba(102, 231, 255, 0.5);
  background:
    repeating-linear-gradient(105deg, rgba(102, 231, 255, 0.06) 0 7px, rgba(102, 231, 255, 0.15) 7px 14px),
    linear-gradient(180deg, rgba(19, 44, 82, 0.98), rgba(8, 12, 35, 0.99) 72%);
  color: var(--gt-color-text-secondary, #d7d9f8);
  cursor: wait;
  animation: serverActionBusyPulse 1250ms ease-in-out infinite;
}

.server-action-button--pending::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(102, 231, 255, 0.18), transparent);
  animation: serverActionBusySweep 1800ms linear infinite;
}

.server-action-button--success,
.server-action-button--success:disabled {
  border-color: rgba(115, 255, 122, 0.78);
  background:
    linear-gradient(180deg, rgba(28, 104, 67, 0.98), rgba(12, 41, 37, 1) 72%),
    #0d2a25;
  box-shadow:
    0 0 18px rgba(115, 255, 122, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -13px 18px rgba(0, 0, 0, 0.42);
  color: #f0fff2;
  cursor: wait;
}

.server-action-button--success::after {
  content: '';
  position: absolute;
  top: -55%;
  bottom: -55%;
  left: -45px;
  z-index: 1;
  width: 34px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  transform: rotate(18deg);
  animation: serverActionSuccessSheen 1550ms ease-in-out infinite;
}

.server-action-button--cooldown,
.server-action-button--cooldown:disabled {
  border-color: rgba(255, 211, 77, 0.42);
  background:
    linear-gradient(180deg, rgba(48, 42, 54, 0.98), rgba(14, 12, 26, 0.99) 72%),
    #11101c;
  box-shadow:
    inset 0 1px 0 rgba(255, 211, 77, 0.1),
    inset 0 -12px 18px rgba(0, 0, 0, 0.5);
  color: var(--gt-color-text-muted, #a8add6);
  cursor: wait;
}

@keyframes serverActionBusyPulse {
  0%,
  100% {
    filter: brightness(0.92);
  }

  50% {
    filter: brightness(1.08);
  }
}

@keyframes serverActionBusySweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@keyframes serverActionSuccessSheen {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(18deg);
  }

  18% {
    opacity: 0.95;
  }

  72% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: translateX(205px) rotate(18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .server-action-button--pending,
  .server-action-button--pending::after,
  .server-action-button--success::after {
    animation: none;
  }
}

.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 {
  justify-self: end;
  max-width: 180px;
  overflow: hidden;
  font-size: small;
  text-overflow: ellipsis;
  white-space: nowrap;
}


img {
  pointer-events: none;
}


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

}

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

.footer {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(120px, 1fr);
  position: relative;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.footerImprintLink {
  justify-self: start;
  white-space: nowrap;
}

.footerBloodlorePromo {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "eyebrow logo"
    "status logo";
  align-items: center;
  column-gap: 10px;
  justify-self: center;
  min-width: 0;
  color: var(--gt-color-text-secondary, #d7d9f8);
  text-decoration: none;
}

.footerBloodlorePromo:hover {
  color: var(--gt-color-accent-cyan, #66e7ff);
}

.footerBloodloreEyebrow {
  grid-area: eyebrow;
  align-self: end;
  font-family: var(--gt-font-heading, "Londrina Solid", "Luckiest Guy", serif);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.footerBloodloreStatus {
  grid-area: status;
  align-self: start;
  color: var(--gt-color-reward-gold, #ffd34d);
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.footerBloodloreLogo {
  grid-area: logo;
  display: block;
  width: 118px;
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.48));
}

/* Mobile footer optimizations */
@media only screen and (max-width: 768px) {
  .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    min-height: 94px;
    font-size: 0.9em;
  }

  .footerImprintLink,
  .versionumber {
    justify-self: center;
  }

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

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

  .footerBloodlorePromo {
    column-gap: 7px;
  }

  .footerBloodloreEyebrow {
    font-size: 11px;
  }

  .footerBloodloreLogo {
    width: 98px;
  }

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

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

.gamehome {
    display: flex;
    position: relative;
    flex-grow: 1;
    min-height: calc(100vh - 50px);
    overflow-x: visible;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}




@media only screen and (min-width: 701px) {
    .gamehome {
        min-width: 1024px;
    }

    .gamehomecontent {
        display: flex;
        width: 1024px;
        min-width: 1024px;
        max-width: none;
        flex: 0 0 1024px;
        flex-direction: column;
        position: relative;
        /* justify-content: flex-start; */
        /* align-items: center; */
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 24px;

        /* background-color: black; */

    }

    .gamehomecontent::before {
        content: "";
        position: absolute;
        top: 58px;
        left: 50%;
        width: 1080px;
        height: calc(100% - 24px);
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(ellipse at 50% 0%, rgba(102, 231, 255, 0.14), transparent 34%),
            radial-gradient(ellipse at 50% 48%, rgba(49, 24, 108, 0.38), transparent 62%);
        filter: blur(0.2px);
    }

    .gamehomecontent>* {
        position: relative;
        z-index: 1;
    }

    .gamecontent {
        display: flex;
        flex-direction: row;
        width: 884px;
        flex-grow: 1;
        align-self: center;
        align-items: flex-start;
        margin-top: 8px;



    }


    .ClubHeader {
        margin: 28px 0px 0 0px;
        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) {
    .gamehome {
        min-height: calc(100vh - 40px);
        overflow-x: hidden;
        background:
            radial-gradient(circle at 50% 140px, rgba(102, 231, 255, 0.18), transparent 240px),
            linear-gradient(180deg, rgba(4, 7, 22, 0.12), rgba(4, 7, 22, 0.74)),
            var(--gt-image-stage-background);
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
    }

    .gamehomecontent {
        width: 100vw;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 18px;
    }

    .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;
}

.homeWithPtsBanner {
  padding-top: 84px;
}

.ptsBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 6px 14px;
  text-align: center;
  text-decoration: none;
  font-family: "Luckiest Guy", serif;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #fff7c2;
  background: linear-gradient(90deg, #700000 0%, #a30000 48%, #700000 100%);
  border-bottom: 2px solid rgba(255, 236, 179, 0.7);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.ptsBanner:hover {
  color: #ffffff;
  background: linear-gradient(90deg, #8a0000 0%, #bf0000 48%, #8a0000 100%);
}

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

.topImageContainerAuth {
  margin-bottom: -70px;
}

.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(/16c2711ac8578c0dfaf8.png);
  background-position: center top;
  background-size: contain;

  margin: 0 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: clamp(10px, 2vh, 30px) auto clamp(5px, 1vh, 20px) auto;
  /* margin: auto;
  z-index: 1; */
  width: min(300px, calc(100vw - 24px));
  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,
.playNowContainer h2 {
  font-size: clamp(1.2em, 3vw, 1.5em);
  margin: 10px 0;
}

.routeRecoveryPage {
  justify-content: center;
  gap: clamp(12px, 3vh, 28px);
}

.routeRecoveryLogo {
  height: clamp(180px, 32vh, 360px);
}

.routeRecoveryPanel {
  width: min(560px, calc(100% - 32px));
  margin-top: clamp(28px, 7vh, 72px);
  padding: clamp(20px, 4vw, 32px);
  box-sizing: border-box;
  text-align: center;
  color: #f4f4f6;
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.9), rgba(10, 12, 18, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.routeRecoveryPanel h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 6vw, 3rem);
  font-family: "Luckiest Guy", serif;
  letter-spacing: 0;
  color: #fff7c2;
  text-shadow: 2px 2px 2px black;
}

.routeRecoveryActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.routeRecoveryActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 48px;
  padding: 10px 18px;
  box-sizing: border-box;
  color: white;
  text-decoration: none;
  font-family: "Luckiest Guy", serif;
  font-size: 1.15rem;
  letter-spacing: 0;
  background: linear-gradient(135deg, var(--purple), #9933cc);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.routeRecoveryActions a:hover,
.routeRecoveryActions a:focus {
  color: white;
  background: linear-gradient(135deg, #bb33ff, var(--purple));
  outline: 2px solid #fff7c2;
  outline-offset: 3px;
}

.seoLandingContent {
  width: min(1000px, calc(100% - 40px));
  margin: clamp(20px, 4vh, 48px) auto 0;
  padding: clamp(18px, 3vw, 28px);
  box-sizing: border-box;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.88), rgba(10, 12, 18, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f4f4f6;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.seoLandingContent h1 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.8vw, 2.3rem);
  line-height: 1.2;
}

.seoLandingContent h2 {
  margin: clamp(20px, 3vh, 28px) 0 10px;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.seoIntro {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: #ececf0;
}

.seoHeroFigure {
  margin: clamp(16px, 2vh, 24px) 0 0;
}

.seoHeroFigure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.seoHighlights {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.seoFaqList {
  display: grid;
  gap: 14px;
}

.seoFaqItem {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.seoFaqItem h3 {
  margin: 0 0 8px;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
}

.seoFaqItem p {
  margin: 0;
  line-height: 1.6;
  color: #f3f3f6;
}

.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) {
  .homeWithPtsBanner {
    padding-top: 96px;
  }

  .ptsBanner {
    min-height: 62px;
    font-size: 14px;
    line-height: 1.2;
    padding: 8px 10px;
  }

  .home {
    padding: 5px 0;
    min-height: calc(100vh - 60px);
  }

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

  .topImageContainerAuth {
    margin-bottom: -60px;
  }

  .topImage {
    background-size: contain;
    margin: 0 auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .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);
  }

  .seoLandingContent {
    width: calc(100% - 24px);
    padding: 16px;
    margin-top: 18px;
  }
}

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

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

  .topImageContainerAuth {
    margin-bottom: -55px;
  }

  .topImage {
    background-size: contain;
    margin: 0 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);
  }

  .topImageContainerAuth {
    margin-bottom: -40px;
  }

  .topImage {
    background-size: contain;
    margin: 0 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: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

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

.socialIconName {
  display: flex;
}

.socialIconName a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  border-radius: 8px;
  text-decoration: none;
}

.socialIconName a:focus-visible {
  outline: 2px solid var(--gt-color-accent-cyan, #66e7ff);
  outline-offset: 2px;

}

.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);
}

.socialVisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

  .socialIconName a {
    min-width: 44px;
    min-height: 44px;
  }
}

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

  .socialIcon {
    height: clamp(14px, 3vw, 18px);
    width: clamp(14px, 3vw, 18px);
    margin-right: 0;
  }
}

/* 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(/16c2711ac8578c0dfaf8.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: min(400px, calc(100% - 24px));
  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;
  box-sizing: border-box;
}

.loginContainer__NKkmaJjL h1 {
  color: var(--purple);
  font-family: "Luckiest Guy", serif;
  font-size: clamp(1.5em, 4vw, 2.2em);
  left: 50%;
  line-height: 1;
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: -53px;
  transform: translateX(-50%);
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.frameBack__TRdP4eoV {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 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: var(--gt-font-body);
  font-size: 1em;
  letter-spacing: 0.01em;
  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: var(--gt-font-body);
}

.fieldLabel__arT6OGGs {
  color: #f0e7ff;
  font-family: "Luckiest Guy", serif;
  font-size: 0.82em;
  line-height: 1;
  margin: 0 0 -4px 2px;
  text-align: left;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.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;
  width: 100%;
  min-height: 36px;
  margin: 2px 0;
  padding: 0;
  border: 0;
  background: transparent;
  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);
}

.linkForgottPW__wGq_TCWv:focus-visible,
.passwordToggleIcon__OFCip5XW:focus-visible,
.redButton____cSyBSl:focus-visible {
  outline: 2px solid var(--gt-color-accent-cyan, #66e7ff);
  outline-offset: 2px;
}

.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 {
  --password-field-height: 40px;
  position: relative;
  display: flex;
  width: 100%;
  margin: 2px 0;
}

.passwordInputContainer__uoeKKxE0 .input__dPhM5fL2 {
  width: 100%;
  height: var(--password-field-height);
  padding-right: 48px;
  padding-left: 12px;
  margin: 0;
  box-sizing: border-box;
}

.passwordToggleIcon__OFCip5XW {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  display: flex;
  justify-content: center;
  width: 44px;
  height: var(--password-field-height);
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  font-size: 16px;
  line-height: 0;
  color: #aaa;
  z-index: 1;
  pointer-events: auto;
  transition: color 0.3s ease;
}

.passwordToggleIcon__OFCip5XW svg {
  display: block;
  height: 18px;
  width: 18px;
}

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

.passwordToggleIcon__OFCip5XW:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 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: min(350px, calc(100% - 20px));
    margin: clamp(5px, 1vh, 20px) auto;
  }

  .frameBack__TRdP4eoV {
    margin: 0;
    padding: 16px 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: min(320px, calc(100% - 12px));
    margin: clamp(3px, 1vh, 15px) auto;
    border-width: 32px;
  }

  .loginContainer__NKkmaJjL h1 {
    top: -38px;
  }

  .frameBack__TRdP4eoV {
    margin: 0;
    padding: 14px 14px 10px 14px;
  }

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

  .passwordInputContainer__uoeKKxE0 .input__dPhM5fL2 {
    height: var(--password-field-height);
  }

  .passwordInputContainer__uoeKKxE0 {
    --password-field-height: 35px;
  }
}

@media only screen and (max-width: 360px) {
  .loginContainer__NKkmaJjL {
    border-width: 24px;
  }

  .loginContainer__NKkmaJjL h1 {
    top: -24px;
  }

  .frameBack__TRdP4eoV {
    padding-inline: 10px;
  }

  .redButton____cSyBSl {
    padding-inline: 14px;
  }
}

@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(/16c2711ac8578c0dfaf8.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: var(--gt-font-body);
  font-size: 1em;
  letter-spacing: 0.01em;
  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: var(--gt-font-body);
}

.fieldLabel__lMnDaas0 {
  color: #f0e7ff;
  display: block;
  font-family: "Luckiest Guy", serif;
  font-size: 0.82em;
  line-height: 1;
  margin: 0 0 2px 2px;
  text-align: left;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.form__KxjCkhpt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  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: min(400px, calc(100% - 24px));
  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;
  box-sizing: border-box;
}

.loginContainer__FNTzq6i4 h1 {
  color: var(--purple);
  font-family: "Luckiest Guy", serif;
  font-size: clamp(1.5em, 4vw, 2.2em);
  left: 50%;
  line-height: 1;
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: -53px;
  transform: translateX(-50%);
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.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%;
  margin: 0;
  padding: 16px 40px 20px 40px;
  box-sizing: border-box;
}

.passwordInputContainer__GmP6An4o {
  --password-field-height: 40px;
  position: relative;
  width: 100%;
  margin: 5px 0;
}

.passwordInputContainer__GmP6An4o .input__iNZC9WwT {
  width: 100%;
  height: var(--password-field-height);
  margin: 0;
  padding-right: 48px;
}

.passwordToggleIcon__W_lKPudh {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  display: flex;
  justify-content: center;
  width: 44px;
  height: var(--password-field-height);
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #aaa;
  font-size: 16px;
  line-height: 0;
  -webkit-user-select: none;
          user-select: none;
  z-index: 2;
  transition: color 0.3s ease;
}

.passwordToggleIcon__W_lKPudh svg {
  display: block;
  height: 18px;
  width: 18px;
}

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

.passwordToggleIcon__W_lKPudh:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.passwordToggleIcon__W_lKPudh:focus-visible,
.redButton__eD5CIwIG:focus-visible {
  outline: 2px solid var(--gt-color-accent-cyan, #66e7ff);
  outline-offset: 2px;
}

.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;
}

.registerSuccessBox__rknRRA56 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

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

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

  .frameBack__WDzEd82z {
    padding: 16px 30px 15px 30px;
  }
}

@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: min(320px, calc(100% - 12px));
    margin: clamp(3px, 1vh, 15px) auto;
    border-width: 32px;
  }

  .loginContainer__FNTzq6i4 h1 {
    top: -38px;
  }

  .frameBack__WDzEd82z {
    padding: 14px 14px 10px 14px;
  }

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

  .passwordInputContainer__GmP6An4o .input__iNZC9WwT {
    height: var(--password-field-height);
  }

  .passwordInputContainer__GmP6An4o {
    --password-field-height: 35px;
  }
}

@media only screen and (max-width: 360px) {
  .loginContainer__FNTzq6i4 {
    border-width: 24px;
  }

  .loginContainer__FNTzq6i4 h1 {
    top: -24px;
  }

  .frameBack__WDzEd82z {
    padding-inline: 10px;
  }

  .redButton__eD5CIwIG {
    padding-inline: 14px;
  }
}

@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;
  }
}

.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: 0 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;
    cursor: pointer;


}


.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;
}

/* Setup Slot Name Styles */
.setupSlotNameContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 5px;
    min-height: 30px;
}

.setupSlotNameDisplay {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.setupSlotNameLabel {
    font-family: "Luckiest Guy", serif;
    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;
}

.setupSlotNameEditIcon {
    cursor: pointer;
    font-size: 20px;
    color: var(--purple);
    text-shadow: 1px 1px 1px black,
        1px -1px 1px black,
        -1px 1px 1px black,
        -1px -1px 1px black;
    transition: transform 0.2s;
}

.setupSlotNameEditIcon:hover {
    transform: scale(1.2);
    color: #b794f6;
}

.setupSlotNameEdit {
    display: flex;
    align-items: center;
}

.setupSlotNameInput {
    font-family: "Luckiest Guy", serif;
    font-size: 18px;
    color: var(--purple);
    text-transform: uppercase;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--purple);
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    text-shadow: 1px 1px 1px black;
}

.setupSlotNameInput:focus {
    border-color: #b794f6;
    box-shadow: 0 0 8px rgba(183, 148, 246, 0.5);
}

.tooltip-parent-element {
    position: relative;

}

.tooltip,
.tooltipAtCursor {
    position: fixed;
    width: -webkit-max-content;
    width: max-content;
    max-width: min(280px, calc(100vw - 16px));
    box-sizing: border-box;
    padding: 6px 9px 7px;
    border: 1px solid rgba(102, 231, 255, 0.72);
    border-bottom-color: rgba(177, 104, 255, 0.76);
    border-radius: 6px;
    background:
        radial-gradient(circle at 18% 0%, rgba(102, 231, 255, 0.24), transparent 46%),
        linear-gradient(180deg, rgba(32, 22, 78, 0.98), rgba(13, 16, 44, 0.98));
    color: var(--gt-color-text-primary, #ffffff);
    font-family: var(--gt-font-body, "Dante", "Roboto Slab", "Trebuchet MS", sans-serif);
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.48),
        0 0 14px rgba(102, 231, 255, 0.22);
    pointer-events: none;
    z-index: 9999;
    overflow-wrap: anywhere;
}

.tooltip--rich {
    max-width: min(320px, calc(100vw - 16px));
    padding: 8px 10px;
    line-height: 1.3;
}

.tooltip h2,
.tooltipAtCursor h2 {
    margin: 0 0 4px;
    color: var(--gt-color-accent-cyan, #66e7ff);
    font-family: var(--gt-font-heading, "Londrina Solid", Impact, sans-serif);
    font-size: 16px;
    line-height: 1;
    text-align: left;
    text-shadow: 1px 1px 0 #000;
}

.tooltip .itemType,
.tooltipAtCursor .itemType {
    color: var(--gt-color-text-muted, #a8add6);
    font-family: var(--gt-font-heading, "Londrina Solid", Impact, sans-serif);
    font-size: 10px;
    letter-spacing: 0;
}

.tooltip .statsBody,
.tooltipAtCursor .statsBody {
    margin-top: 5px;
}

.tooltip .statEntryDescription,
.tooltipAtCursor .statEntryDescription {
    color: var(--gt-color-text-secondary, #d7d9f8);
}

@media only screen and (max-width: 700px) {
    .tooltip,
    .tooltipAtCursor {
        max-width: min(240px, calc(100vw - 16px));
        padding: 6px 8px;
        font-size: 11px;
    }

    .tooltip--rich {
        max-width: min(280px, calc(100vw - 16px));
    }
}

.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;
    gap: 10px;



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


}


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


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

    min-height: 300px;
    padding: 0;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.34));

    h1 {
        position: relative;
        top: -72px;
        margin-bottom: -44px;
        line-height: 1;
        color: var(--gt-color-accent-magenta);
        text-shadow: 2px 3px 0 #000, 0 0 12px rgba(240, 76, 255, 0.24);
    }

}

.greyedOut {
    opacity: 0.75;

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

.journalContents {
    margin: -22px -28px -30px;
}

.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;
    }

    .journal-mission-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(25, 15, 45, 0.9);
        border: 1px solid rgba(255, 220, 130, 0.8);
        color: #ffe7a6;
        padding: 2px 6px;
        font-size: 9px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        border-radius: 8px;
        z-index: 20;
    }

    .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);
    }

    .circle_BruteForce {
        background-image: url(/489dc1f46016daa62b44.png);
        filter: sepia(1) saturate(1.8) hue-rotate(338deg) brightness(1.1) contrast(1.08);
    }

}



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

    /* align-items: center; */
    margin: 6px 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;
  width: 474px;
  margin-bottom: 10px;
}

.missionsPanel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* background: linear-gradient(135deg, rgba(19, 24, 35, 0.92), rgba(12, 16, 23, 0.94)); */
  border-image: url(/6040b3398bf7efa6feb2.png);
  border-style: solid;
  border-width: 44px;
  border-image-slice: 60 fill;
  color: var(--gt-color-text-primary);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34));
  /* box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); */
  /* overflow: hidden; */
}

.missionsPanelContent {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: -15px;
  gap: 8px;
}

.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 11px;
  color: var(--gt-color-accent-cyan);
  margin-bottom: 4px;
}

.missionsPanel h1 {
  margin: 0;
  font-size: 26px;
  line-height: 0.98;
  color: var(--gt-color-text-primary);
  text-shadow: 2px 3px 0 #000, 0 0 12px rgba(102, 231, 255, 0.2);
}

.missionsPanel_upcoming h1,
.missionsPanel_disabled h1 {
  font-size: 24px;
  color: var(--gt-color-text-secondary);
}

.missionsPanel_upcoming .panelHeader,
.missionsPanel_disabled .panelHeader {
  min-height: 78px;
}

.missionFlavor {
  margin-top: 6px;
  color: var(--gt-color-text-secondary);
  font-size: 14px;
  max-width: 640px;
}

.statusBlock {
  text-align: right;
  min-width: 180px;
}

.statusChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  text-transform: capitalize;
  border: 1px solid rgba(102, 231, 255, 0.22);
  background: rgba(26, 15, 70, 0.88);
}

.status_active {
  color: var(--gt-color-success);
  border-color: rgba(115, 255, 122, 0.42);
}

.status_upcoming {
  color: var(--gt-color-reward-gold);
  border-color: rgba(255, 211, 77, 0.42);
}

.status_disabled {
  color: var(--gt-color-danger);
  border-color: rgba(255, 77, 109, 0.4);
}

.countdownLabel {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gt-color-text-muted);
}

.countdownValue {
  font-size: 18px;
  color: var(--gt-color-text-primary);
  font-weight: 600;
  text-shadow: 1px 2px 0 #000;
}

.progressSummary {
  background: linear-gradient(180deg, rgba(36, 21, 90, 0.74), rgba(26, 15, 70, 0.88));
  border: 1px solid rgba(102, 231, 255, 0.18);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progressLabel {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gt-color-accent-cyan);
}

.progressBar {
  width: 100%;
  height: 10px;
  background: rgba(7, 8, 20, 0.72);
  border: 1px solid rgba(102, 231, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
}

.progressFill {
  height: 100%;
  background: linear-gradient(90deg, var(--gt-color-accent-cyan), var(--gt-color-success));
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progressMeta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gt-color-text-secondary);
}

.rewardSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.summaryBlock {
  padding: 8px;
  border-radius: 8px;
  background: rgba(26, 15, 70, 0.72);
  border: 1px solid rgba(102, 231, 255, 0.16);
}

.summaryBlock .label {
  font-size: 12px;
  color: var(--gt-color-text-muted);
}

.summaryBlock .value {
  font-size: 18px;
  color: var(--gt-color-text-primary);
  margin: 4px 0;
}

.summaryBlock .hint {
  font-size: 12px;
  color: var(--gt-color-text-secondary);
}

.sectionTitle {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gt-color-accent-cyan);
  margin-top: 6px;
}

.sectionToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  padding: 4px 0;
  transition: opacity 0.2s ease;
}

.sectionToggle:hover {
  opacity: 0.85;
}

.sectionToggle:hover .chevron {
  color: var(--gt-color-text-primary);
}

.chevron {
  font-size: 18px;
  color: var(--gt-color-text-secondary);
  transition: color 0.2s ease, transform 0.2s ease;
  min-width: 20px;
  text-align: center;
}

.objectivesGrid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  grid-template-columns: repeat(auto-fit, 110px);
  justify-content: space-around;
  gap: 8px;
}

.objectiveCard {
  background: linear-gradient(180deg, rgba(36, 21, 90, 0.62), rgba(26, 15, 70, 0.78));
  border: 1px solid rgba(102, 231, 255, 0.16);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(102, 231, 255, 0.08);
}

.objectiveHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gt-color-text-secondary);
}

.statusDot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.statusDot.rarity_common {
  background: var(--gt-color-text-muted);
}

.statusDot.rarity_uncommon {
  background: var(--gt-color-success);
}

.statusDot.rarity_normal {
  background: var(--gt-color-accent-blue);
}

.statusDot.rarity_rare {
  background: var(--gt-color-accent-violet);
}

.statusDot.rarity_boss {
  background: var(--gt-color-danger);
}

.enemyImageFrame {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: rgba(7, 8, 20, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
}

.enemyImage {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.missionsPanel .enemyImageFrame {
  border: 1px dashed rgba(102, 231, 255, 0.2);
  background: radial-gradient(circle at 50% 50%, rgba(102, 231, 255, 0.08), rgba(7, 8, 20, 0.28));
}

.missionsPanel .enemyImageFrameLink {
  cursor: pointer;
  border-color: rgba(255, 211, 77, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 211, 77, 0.18), 0 8px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.missionsPanel .enemyImageFrameLink:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 211, 77, 0.35), 0 10px 18px rgba(0, 0, 0, 0.35);
}

.enemySilhouette {
  width: 96px;
  height: 96px;
  background-image: url(/dfb67e5b407208d5ed45.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.8;
  filter: grayscale(1);
}

.missionEnemyBackground {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(/3640fce4d7fb39a961f5.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.missionEnemyImage {
  max-width: 100px;
  max-height: 96px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.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);
}

.enemyImageBackground_midnight,
.enemyImageBackground_nessy,
.enemyImageBackground_gift,
.enemyImageBackground_special,
.enemyImageBackground_monster,
.enemyImageBackground_enigma,
.enemyImageBackground_rainbow,
.enemyImageBackground_secret {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.enemyImageBackground_crystal {
  background-image:
    linear-gradient(180deg, rgba(6, 36, 48, 0.12), rgba(6, 36, 48, 0.36)),
    url(/4c306b3f3abfc250e07e.jpeg);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, contain;
  background-color: #0a2833;
}

.objectiveName {
  font-size: 15px;
  font-weight: 600;
  color: var(--gt-color-text-primary);
}

.objectiveMeta {
  font-size: 12px;
  color: var(--gt-color-text-secondary);
}

.objectiveProgress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.objectiveProgressBar {
  height: 8px;
  background: rgba(7, 8, 20, 0.72);
  border-radius: 6px;
  overflow: hidden;
}

.objectiveProgressFill {
  height: 100%;
  background: linear-gradient(90deg, var(--gt-color-accent-cyan), var(--gt-color-success));
  border-radius: 6px;
  transition: width 0.3s ease;
}

.objectiveProgressMeta {
  display: flex;
  justify-content: space-between;
  color: var(--gt-color-text-secondary);
  font-size: 12px;
}

.rewardTiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.rewardTier {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(102, 231, 255, 0.16);
  background: linear-gradient(180deg, rgba(36, 21, 90, 0.62), rgba(26, 15, 70, 0.78));
}

.rewardTierReached {
  border-color: rgba(102, 231, 255, 0.62);
  box-shadow: 0 8px 24px rgba(102, 231, 255, 0.12);
}

.rewardTierHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rewardTierHeader .label {
  font-size: 12px;
  color: var(--gt-color-text-muted);
}

.rewardTierValue {
  font-size: 18px;
  color: var(--gt-color-text-primary);
}

.tierBadge {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(26, 15, 70, 0.88);
  color: var(--gt-color-text-secondary);
}

.tierBadgeReached {
  background: rgba(102, 231, 255, 0.15);
  color: var(--gt-color-success);
}

.emptyState {
  padding: 16px;
  border: 1px dashed rgba(102, 231, 255, 0.24);
  border-radius: 8px;
  color: var(--gt-color-text-secondary);
  background: rgba(26, 15, 70, 0.42);
}

/* Mobile Responsive Styles */
@media only screen and (max-width: 700px) {
  .gameMissions {
    width: 100%;
    max-width: 100%;
  }

  .missionsPanel {
    border-width: 30px;
  }

  .missionsPanelContent {
    margin: -10px;
    gap: 6px;
  }

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

  .statusBlock {
    text-align: left;
    min-width: unset;
    width: 100%;
  }

  .missionsPanel h1 {
    font-size: 22px;
  }

  .missionFlavor {
    font-size: 13px;
  }

  .objectivesGrid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 6px;
  }

  .enemyImage,
  .enemySilhouette {
    width: 80px;
    height: 80px;
  }

  .missionEnemyBackground {
    width: 85px;
    height: 85px;
  }

  .missionEnemyImage {
    max-width: 85px;
    max-height: 80px;
  }

  .rewardSummary {
    grid-template-columns: 1fr;
  }

  .rewardTiers {
    grid-template-columns: 1fr;
  }

  .progressSummary {
    padding: 10px;
  }

  .countdownValue {
    font-size: 16px;
  }

  .summaryBlock .value {
    font-size: 16px;
  }

  .rewardTierValue {
    font-size: 16px;
  }
}

@media only screen and (min-width: 701px) {
    .gamehomeheader {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-self: center;
        width: 1024px;
        min-width: 1024px;
        height: 196px;
        color: var(--gt-color-text-primary);
        background-image: url(/e03573011cef68b78157.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
    }

    .HeaderTopRow {
        position: relative;
        z-index: 30;
        display: grid;
        grid-template-columns: 315px 365px 250px;
        column-gap: 20px;
        height: 138px;
        padding: 0 18px 0 28px;
        box-sizing: border-box;
    }

    .HeaderProfile {
        display: flex;
        min-width: 0;
        padding-top: 6px;
        transform: translateX(-10px);
    }

    .ProfilePicFrame {
        position: relative;
        width: 125px;
        height: 135px;
        flex: 0 0 125px;
    }

    .ProfilePic {
        position: relative;
        width: 125px;
        height: 135px;
    }

    .ProfilePic>.tooltip-parent-element {
        position: static;
    }

    .ProfilePicImage {
        display: block;
        width: 116px;
        height: 128px;
        object-fit: contain;
        filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
    }

    .ProfileAvatarImage {
        position: absolute;
        z-index: 2;
        top: 33px;
        left: 22px;
        width: 72px;
        height: 72px;
        object-fit: contain;
        border-radius: 50%;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
    }

    .ProfileCoinImage {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: -10px;
        width: 54px;
        height: 54px;
        object-fit: contain;
        filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.65));
    }

    .PatreonIcon {
        position: absolute;
        z-index: 4;
        left: 2px;
        top: -8px;
        width: 44px;
        height: 20px;
        border: 1px solid rgba(255, 211, 77, 0.7);
        border-radius: 4px;
        background: linear-gradient(180deg, #ffd34d, #a66b13);
        box-shadow: 0 0 8px rgba(255, 211, 77, 0.45);
    }

    .ProfileDetails {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 178px;
        min-width: 0;
        padding-top: 14px;
    }

    .UserName {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        align-items: center;
        min-width: 0;
        min-height: 24px;
        gap: 4px;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 20px;
        color: var(--gt-color-accent-cyan);
        text-shadow: 1px 2px 0 #000;
    }

    .UserName>.tooltip-parent-element {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .UserNameLink {
        min-width: 0;
        color: inherit;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .UserNameLink:hover {
        color: #ffffff;
    }

    .HeaderSettingsButton {
        display: block;
        position: relative;
        width: 28px;
        height: 27px;
        flex: 0 0 28px;
        background-image: url(/bb0239daee620cbe3c32.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
    }

    .HeaderSettingsButton:hover {
        filter: brightness(1.15) drop-shadow(0 0 7px rgba(102, 231, 255, 0.5));
    }

    .mail-indicator-inline {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        cursor: pointer;
    }

    .mail-indicator-icon {
        width: 22px;
        height: 22px;
        background-image: url(/fd43c98534928e220f0a.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .mail-indicator-inline:hover .mail-indicator-icon {
        filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 211, 77, 0.5));
    }

    .mail-indicator-inline:focus-visible,
    .profile-alert-indicator:focus-visible,
    .HeaderSettingsButton:focus-visible,
    .TravelButton:focus-visible,
    .HeaderChronoHuntButton:focus-visible,
    .HeaderResourceSlot:focus-visible,
    .HeaderHuntButton:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(102, 231, 255, 0.65);
    }

    .mail-indicator-badge {
        position: absolute;
        right: -8px;
        top: -7px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ff4937;
        color: #fff;
        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        border: 1px solid rgba(0, 0, 0, 0.55);
    }

    .profile-alert-indicator {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #ff7a00;
        color: white;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        line-height: 1;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    }

    .UserRank {
        margin-top: 2px;
        color: #dcdcff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 13px;
        line-height: 1.1;
        text-shadow: 1px 1px 0 #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .UserLevelBackground {
        position: relative;
        width: 142px;
        height: 24px;
        margin: 5px 0 0 4px;
        background-image: url(/baf85f8e3d7c08ae8d0d.png);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 142px 8px;
    }

    .UserLevel {
        position: absolute;
        left: 2px;
        top: 2px;
        height: 4px;
        max-width: 138px;
        background-image: url(/9552a320f3236b77aba7.png);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 138px 4px;
    }

    .UserLevelTextFont {
        position: absolute;
        left: 0;
        top: 9px;
        width: 178px;
        color: #dcdcff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 13px;
        line-height: 1;
        text-shadow: 1px 1px 0 #000;
        white-space: nowrap;
    }

    .UserLadderRank {
        display: inline-flex;
        align-items: center;
        width: 112px;
        height: 24px;
        margin-top: 14px;
        color: #d9d9d9;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 14px;
        text-decoration: none;
        text-shadow: 1px 1px 0 #000;
    }

    .UserLadderRankIcon {
        width: 30px;
        height: 30px;
        margin-right: 2px;
        background-image: url(/41b8fe54a6b481637231.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .HeaderCurrency {
        position: relative;
        z-index: 80;
        width: 180px;
        height: 28px;
        margin-top: 2px;
    }

    .HeaderCurrency .dropdown {
        position: relative;
        z-index: 80;
        width: 180px;
    }

    .HeaderCurrency .dropdown-button {
        display: flex;
        align-items: center;
        width: 180px;
        height: 25px;
        box-sizing: border-box;
        padding: 2px 24px 2px 7px;
        color: #ffd34d;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 16px;
        line-height: 1;
        text-shadow: 1px 1px 0 #000;
        background-image: url(/c2c3e8a09b620bf356f7.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        border: 0;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
    }

    .HeaderCurrency .dropdown-foldout {
        position: absolute;
        right: 8px;
        width: 13px;
        height: 10px;
        margin: 0;
        background-image: url(/8410b5afa7dee2f45097.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 0;
    }

    .HeaderCurrency .DropDownIcon {
        width: 18px;
        height: 18px;
        margin-left: auto;
    }

    .HeaderCurrency .dropdown-menu {
        z-index: 120;
        min-width: 190px;
        background: rgba(7, 8, 20, 0.97);
        border: 1px solid rgba(102, 231, 255, 0.35);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
    }

    .HeaderCurrency .dropdown-menu a {
        color: #ffffff;
    }

    .HeaderHuntPanel {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        padding-top: 4px;
    }

    .HeaderHuntAction {
        position: relative;
        width: 166px;
        height: 124px;
        flex: 0 0 166px;
    }

    .HeaderHuntAction>.tooltip-parent-element {
        position: static;
    }

    .HeaderChronoHuntButton {
        position: absolute;
        z-index: 3;
        left: -18px;
        top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
        box-sizing: border-box;
        padding: 12px 7px 8px;
        border: 0;
        border-radius: 50%;
        color: #ffffff;
        cursor: pointer;
        background:
            radial-gradient(circle at 45% 36%, rgba(102, 231, 255, 0.92), rgba(32, 77, 145, 0.86) 42%, rgba(13, 18, 44, 0.96) 73%),
            url(/7bcecb3957a289142bc0.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 58px 58px, 34px 38px;
        box-shadow:
            inset 0 0 0 3px rgba(209, 245, 255, 0.42),
            inset 0 -6px 13px rgba(0, 0, 0, 0.5),
            0 7px 12px rgba(0, 0, 0, 0.48);
    }

    .HeaderChronoHuntButton:disabled {
        cursor: default;
        filter: grayscale(0.25) brightness(0.8);
    }

    .HeaderChronoHuntButton.is-ready:hover {
        background:
            radial-gradient(circle at 45% 36%, rgba(187, 255, 255, 0.98), rgba(38, 116, 201, 0.9) 43%, rgba(12, 23, 55, 0.98) 73%),
            url(/5ce7d249e6eb9e04720d.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 58px 58px, 34px 38px;
        transform: translateY(1px);
        filter: drop-shadow(0 0 12px rgba(102, 231, 255, 0.66));
    }

    .HeaderChronoHuntText {
        position: relative;
        z-index: 2;
        max-width: 48px;
        color: #ffffff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 12px;
        line-height: 0.95;
        text-align: center;
        text-shadow: 1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.85);
        white-space: pre-line;
    }

    .HeaderChronoHuntButton.is-cooldown .HeaderChronoHuntText {
        font-size: 12px;
    }

    .HeaderChronoHuntCount {
        position: absolute;
        right: -4px;
        bottom: 2px;
        min-width: 20px;
        height: 20px;
        padding: 0 4px;
        box-sizing: border-box;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: rgba(14, 17, 41, 0.94);
        border: 1px solid rgba(102, 231, 255, 0.62);
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 13px;
        line-height: 1;
        text-shadow: 1px 1px 0 #000;
    }

    .HeaderHuntButton {
        position: absolute;
        left: 50px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 115px;
        height: 115px;
        padding: 0 12px 2px;
        border: 0;
        background-color: transparent;
        background-image: url(/1ec1721c55e5a04e6ae8.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        color: #ffffff;
        cursor: pointer;
        filter: drop-shadow(0 0 12px rgba(102, 231, 255, 0.35));
    }

    .HeaderHuntButton:disabled {
        cursor: default;
    }

    .HeaderHuntButton.is-cooldown {
        background-image: url(/1e098c6ced8e65b438f9.png);
        filter: drop-shadow(0 0 8px rgba(43, 93, 120, 0.45));
    }

    .HeaderHuntButton.is-ready:hover {
        background-image: url(/5ac797e7971779d80265.png);
        filter: drop-shadow(0 0 18px rgba(102, 231, 255, 0.62));
        transform: translateY(2px);
    }

    .HeaderHuntButtonText {
        white-space: pre-line;
        text-align: center;
        font-family: var(--gt-font-display, "Luckiest Guy", serif);
        font-size: 24px;
        line-height: 0.92;
        text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 0 0 6px rgba(8, 163, 121, 0.85);
    }

    .HeaderHuntButton.is-cooldown .HeaderHuntButtonText {
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 21px;
        line-height: 1;
        text-shadow: 1px 1px 0 #000, 0 0 5px rgba(43, 93, 120, 0.8);
    }

    .HeaderHuntLamp {
        position: absolute;
        left: 64px;
        top: 100px;
        width: 35px;
        height: 35px;
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .HeaderHuntLamp.is-active {
        background-image: url(/23a382482801c6ddf86c.png);
        filter: drop-shadow(0 0 12px rgba(102, 231, 255, 0.8));
    }

    .HeaderHuntLamp.is-inactive {
        background-image: url(/f53a757f47b7aad2566b.png);
        opacity: 0.65;
    }

    .HeaderResourceGrid {
        display: grid;
        grid-template-columns: repeat(2, 96px);
        gap: 7px 6px;
        width: 198px;
        padding-top: 2px;
    }

    .HeaderResourceGrid>.tooltip-parent-element {
        width: 96px;
        height: 52px;
    }

    .HeaderResourceSlot {
        position: relative;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-rows: 20px 18px;
        width: 96px;
        height: 52px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #ffffff;
        cursor: pointer;
        text-align: left;
    }

    .HeaderResourceSlot:hover {
        filter: brightness(1.12) drop-shadow(0 0 7px rgba(102, 231, 255, 0.4));
    }

    .HeaderResourceSlot.is-disabled {
        cursor: default;
        opacity: 0.78;
        filter: grayscale(0.25);
    }

    .HeaderResourceIconFrame {
        grid-row: 1 / span 2;
        width: 46px;
        height: 46px;
        margin-top: 3px;
        margin-left: 2px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .HeaderResourceSlot--bait .HeaderResourceIconFrame,
    .HeaderResourceSlot--crystal .HeaderResourceIconFrame {
        background-image: url(/3222a358a8bf16125234.png);
    }

    .HeaderResourceSlot--plasma .HeaderResourceIconFrame {
        background-image: url(/8f0a75980ed482ad04e7.png);
    }

    .HeaderResourceIcon {
        width: 40px;
        height: 40px;
        margin-left: 1px;
        margin-top: -6px;
        object-fit: contain;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    }

    .HeaderResourceText {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        padding-top: 5px;
        padding-left: 2px;
    }

    .HeaderResourceLabel {
        color: #201914;
        font-family: var(--gt-font-display, "Luckiest Guy", serif);
        font-size: 11px;
        line-height: 1;
        text-shadow: none;
        white-space: nowrap;
    }

    .HeaderResourceAmount {
        color: #ffffff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 18px;
        line-height: 1;
        text-shadow: 1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.8);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .HeaderTravel {
        position: relative;
        min-width: 0;
        height: 138px;
    }

    .LocationImage {
        position: absolute;
        z-index: 2;
        top: -27px;
        left: 42px;
        width: 198px;
        height: 198px;
        object-fit: cover;
        pointer-events: none;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
    }

    .LocationName {
        position: absolute;
        z-index: 3;
        left: 38px;
        top: 111px;
        width: 132px;
        height: 22px;
        color: #ffffff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 17px;
        line-height: 1;
        text-align: center;
        text-shadow: 1px 1px 0 #000, -1px 1px 0 #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .TravelButton {
        position: absolute;
        z-index: 4;
        right: -40px;
        bottom: -8px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 114px;
        height: 55px;
        box-sizing: border-box;
        padding-top: 9px;
        color: #ffffff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 17px;
        font-weight: 900;
        text-decoration: none;
        text-shadow: 1px 1px 0 #000;
        background-image: url(/5860d2d548f21e2abf84.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .TravelButton:hover {
        color: var(--gt-color-accent-cyan);
        transform: translateX(4px);
        filter: drop-shadow(0 0 8px rgba(102, 231, 255, 0.45));
    }
}

@media only screen and (max-width: 700px) {
    .gamehomeheader {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 214px;
        padding: 7px 6px 9px;
        box-sizing: border-box;
        color: var(--gt-color-text-primary);
        background-image: url(/e03573011cef68b78157.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: auto 196px;
    }

    .HeaderTopRow {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 128px;
    }

    .HeaderProfile,
    .HeaderTravel {
        display: none;
    }

    .HeaderHuntPanel {
        display: flex;
        justify-content: center;
        width: 100%;
        min-width: 0;
        gap: 8px;
        padding-top: 0;
    }

    .HeaderHuntAction {
        position: relative;
        width: 150px;
        height: 112px;
        flex: 0 0 150px;
    }

    .HeaderHuntAction > .tooltip-parent-element {
        position: static;
    }

    .HeaderChronoHuntButton {
        position: absolute;
        z-index: 3;
        left: 0;
        top: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-width: 0;
        max-width: 48px;
        box-sizing: border-box;
        padding: 9px 5px 7px;
        border: 0;
        border-radius: 50%;
        color: #ffffff;
        cursor: pointer;
        background:
            radial-gradient(circle at 45% 36%, rgba(102, 231, 255, 0.92), rgba(32, 77, 145, 0.86) 42%, rgba(13, 18, 44, 0.96) 73%),
            url(/7bcecb3957a289142bc0.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 46px 46px, 26px 29px;
        box-shadow:
            inset 0 0 0 2px rgba(209, 245, 255, 0.42),
            inset 0 -5px 10px rgba(0, 0, 0, 0.5),
            0 5px 10px rgba(0, 0, 0, 0.45);
    }

    .HeaderChronoHuntButton:disabled {
        cursor: default;
        filter: grayscale(0.25) brightness(0.8);
    }

    .HeaderChronoHuntButton.is-ready:hover {
        background:
            radial-gradient(circle at 45% 36%, rgba(187, 255, 255, 0.98), rgba(38, 116, 201, 0.9) 43%, rgba(12, 23, 55, 0.98) 73%),
            url(/5ce7d249e6eb9e04720d.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 46px 46px, 26px 29px;
    }

    .HeaderChronoHuntText {
        position: relative;
        z-index: 2;
        max-width: 38px;
        color: #ffffff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 9px;
        line-height: 0.95;
        text-align: center;
        text-shadow: 1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.85);
        white-space: pre-line;
    }

    .HeaderChronoHuntButton.is-cooldown .HeaderChronoHuntText {
        font-size: 9px;
    }

    .HeaderChronoHuntCount {
        position: absolute;
        right: -4px;
        bottom: -1px;
        min-width: 18px;
        height: 18px;
        padding: 0 3px;
        box-sizing: border-box;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: rgba(14, 17, 41, 0.94);
        border: 1px solid rgba(102, 231, 255, 0.62);
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 11px;
        line-height: 1;
        text-shadow: 1px 1px 0 #000;
    }

    .HeaderHuntButton {
        position: absolute;
        left: 56px;
        top: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 94px;
        height: 94px;
        padding: 0 10px 2px;
        border: 0;
        background-color: transparent;
        background-image: url(/1ec1721c55e5a04e6ae8.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        color: #ffffff;
        cursor: pointer;
        filter: drop-shadow(0 0 10px rgba(102, 231, 255, 0.32));
    }

    .HeaderHuntButton:disabled {
        cursor: default;
    }

    .HeaderHuntButton.is-cooldown {
        background-image: url(/1e098c6ced8e65b438f9.png);
        filter: drop-shadow(0 0 7px rgba(43, 93, 120, 0.45));
    }

    .HeaderHuntButton.is-ready:hover {
        background-image: url(/5ac797e7971779d80265.png);
    }

    .HeaderHuntButtonText {
        white-space: pre-line;
        text-align: center;
        font-family: var(--gt-font-display, "Luckiest Guy", serif);
        font-size: 19px;
        line-height: 0.92;
        text-shadow: 1px 1px 0 #000, -1px 1px 0 #000;
    }

    .HeaderHuntButton.is-cooldown .HeaderHuntButtonText {
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 17px;
        line-height: 1;
    }

    .HeaderHuntLamp {
        position: absolute;
        left: 68px;
        top: 84px;
        width: 28px;
        height: 28px;
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .HeaderHuntLamp.is-active {
        background-image: url(/23a382482801c6ddf86c.png);
        filter: drop-shadow(0 0 10px rgba(102, 231, 255, 0.75));
    }

    .HeaderHuntLamp.is-inactive {
        background-image: url(/f53a757f47b7aad2566b.png);
        opacity: 0.68;
    }

    .HeaderResourceGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(74px, 84px));
        gap: 4px;
        width: min(176px, calc(100vw - 120px));
        padding-top: 4px;
    }

    .HeaderResourceGrid > .tooltip-parent-element {
        width: 100%;
        height: 44px;
    }

    .HeaderResourceSlot {
        position: relative;
        display: grid;
        grid-template-columns: 35px 1fr;
        grid-template-rows: 18px 16px;
        width: 100%;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #ffffff;
        cursor: pointer;
        text-align: left;
    }

    .HeaderResourceSlot.is-disabled {
        cursor: default;
        opacity: 0.78;
    }

    .HeaderResourceIconFrame {
        grid-row: 1 / span 2;
        width: 38px;
        height: 38px;
        margin-top: 2px;
        margin-left: 2px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .HeaderResourceSlot--bait .HeaderResourceIconFrame,
    .HeaderResourceSlot--crystal .HeaderResourceIconFrame {
        background-image: url(/3222a358a8bf16125234.png);
    }

    .HeaderResourceSlot--plasma .HeaderResourceIconFrame {
        background-image: url(/8f0a75980ed482ad04e7.png);
    }

    .HeaderResourceIcon {
        width: 33px;
        height: 33px;
        margin-left: 0;
        margin-top: -4px;
        object-fit: contain;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    }

    .HeaderResourceText {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding-top: 4px;
        padding-left: 4px;
    }

    .HeaderResourceLabel {
        color: #201914;
        font-family: var(--gt-font-display, "Luckiest Guy", serif);
        font-size: 9px;
        line-height: 1;
        text-shadow: none;
    }

    .HeaderResourceAmount {
        color: #ffffff;
        font-family: var(--gt-font-heading, "Londrina Solid", serif);
        font-size: 15px;
        line-height: 1;
        text-shadow: 1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.8);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mail-indicator-badge {
        position: absolute;
        right: -8px;
        top: -7px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ff4937;
        color: #fff;
        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        border: 1px solid rgba(0, 0, 0, 0.55);
    }

    .HeaderResourceSlot:focus-visible,
    .HeaderChronoHuntButton:focus-visible,
    .HeaderHuntButton:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(102, 231, 255, 0.65);
    }
}

@media only screen and (max-width: 360px) {
    .gamehomeheader {
        min-height: 204px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .HeaderTopRow {
        min-height: 116px;
    }

    .HeaderHuntPanel {
        gap: 5px;
    }

    .HeaderHuntAction {
        width: 134px;
        height: 104px;
        flex-basis: 134px;
    }

    .HeaderChronoHuntButton {
        top: 27px;
        width: 40px;
        height: 40px;
        max-width: 40px;
        background-size: 39px 39px, 22px 25px;
    }

    .HeaderChronoHuntText {
        max-width: 32px;
        font-size: 8px;
    }

    .HeaderChronoHuntButton.is-cooldown .HeaderChronoHuntText {
        font-size: 8px;
    }

    .HeaderChronoHuntCount {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .HeaderHuntButton {
        left: 54px;
        width: 80px;
        height: 80px;
        padding-bottom: 2px;
    }

    .HeaderHuntButtonText {
        font-size: 16px;
    }

    .HeaderHuntButton.is-cooldown .HeaderHuntButtonText {
        font-size: 15px;
    }

    .HeaderHuntLamp {
        left: 62px;
        top: 72px;
        width: 24px;
        height: 24px;
    }

    .HeaderResourceGrid {
        grid-template-columns: repeat(2, 72px);
        width: 148px;
        gap: 3px;
        padding-top: 3px;
    }

    .HeaderResourceGrid > .tooltip-parent-element,
    .HeaderResourceSlot {
        height: 40px;
    }

    .HeaderResourceSlot {
        grid-template-columns: 32px 1fr;
    }

    .HeaderResourceIconFrame {
        width: 38px;
        height: 38px;
    }

    .HeaderResourceIcon {
        width: 33px;
        height: 33px;
    }

    .HeaderResourceLabel {
        font-size: 8px;
    }

    .HeaderResourceAmount {
        font-size: 14px;
    }

}

.gamenavigation {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    padding: 10px 28px 18px 68px;
    box-sizing: border-box;
}

.gamenavigation .navButton {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    width: 163px;
    flex: 0 0 163px;
    height: 37px;
    box-sizing: border-box;
    padding: 7px 6px 6px 48px;
    color: rgb(83, 195, 241);
    font-family: var(--gt-font-heading, "Londrina Solid", serif);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgb(27, 54, 118), 0 2px 2px #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: color 120ms ease, filter 120ms ease, transform 120ms ease;
}

.gamenavigation .navButton:hover,
.gamenavigation .navButton.is-active {
    color: #ffffff;
    filter: drop-shadow(0 0 8px rgba(102, 231, 255, 0.45));
    text-shadow: 1px 1px 0 rgb(0, 138, 234), 0 2px 2px #000;
}

.gamenavigation .navButton:hover {
    transform: translateY(-1px);
}

.gamenavigation .navButtonHome {
    background-image: url(/fd45529a4f3e03e2e3e0.png);
}

.gamenavigation .navButtonHome:hover,
.gamenavigation .navButtonHome.is-active {
    background-image: url(/30e440b0b01ccc62b67f.png);
}

.gamenavigation .navButtonScotch {
    background-image: url(/9e1152d9c67102bbbc58.png);
}

.gamenavigation .navButtonScotch:hover,
.gamenavigation .navButtonScotch.is-active {
    background-image: url(/c73eb3d7714f4558b51e.png);
}

.gamenavigation .navButtonInventory {
    padding-left: 42px;
    background-image: url(/75fdd8b22a16a3b245b9.png);
}

.gamenavigation .navButtonInventory:hover,
.gamenavigation .navButtonInventory.is-active {
    background-image: url(/deb60e0ed5fdb00a3cf5.png);
}

.gamenavigation .navButtonAlbum {
    background-image: url(/42691969dc37e27e9e3b.png);
}

.gamenavigation .navButtonAlbum:hover,
.gamenavigation .navButtonAlbum.is-active {
    background-image: url(/1f65c9edcebbb5328c14.png);
}

.gamenavigation .navButtonGlossary {
    padding-left: 42px;
    background-image: url(/aa3a4d9fd78101db7075.png);
}

.gamenavigation .navButtonGlossary:hover,
.gamenavigation .navButtonGlossary.is-active {
    background-image: url(/4fea50b426719b6270f3.png);
}

.gamenavigation .dropdown {
    width: 100%;
    color: inherit;
}

.gamenavigation .dropdown-button {
    display: flex;
    align-items: center;
    width: 100%;
    color: inherit;
    border: 0;
    cursor: pointer;
}

.gamenavigation .dropdown-button:hover {
    color: inherit;
}

.gamenavigation .dropdown-foldout {
    display: none;
}

.gamenavigation .dropdown-menu {
    position: absolute;
    top: 36px;
    left: 35px;
    z-index: 30;
    display: block;
    min-width: 210px;
    max-height: 70vh;
    overflow-y: auto;
    background: rgba(7, 8, 20, 0.97);
    border: 1px solid rgba(102, 231, 255, 0.32);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(102, 231, 255, 0.12);
}

.gamenavigation .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gamenavigation .dropdown-menu a {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 10px 14px;
    color: var(--gt-color-text-secondary);
    font-family: var(--gt-font-heading, "Londrina Solid", serif);
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.gamenavigation .dropdown-menu a:hover {
    color: var(--gt-color-accent-cyan);
    background-color: rgba(102, 231, 255, 0.12);
}

.gamenavigation .DropDownIcon {
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

@media only screen and (max-width: 700px) {
    .gamenavigation {
        display: none;
    }
}

.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: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #f0f0f0;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    z-index: 1;
    touch-action: manipulation;
    -webkit-appearance: none;
}

@keyframes fadeOpacityIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOpacityOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media only screen and (min-width: 701px) {
    .gamehomenewsheader {
        display: flex;
        flex-direction: column;
        position: relative;
        align-self: center;
        width: 884px;
        min-height: 134px;
        margin-top: 5px;
        margin-bottom: 8px;
    }

    .gamehomesettings {
        display: flex;
        position: absolute;
        z-index: 5;
        top: 2px;
        right: 0;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        height: 24px;
        margin: 0;
    }

    .gamehomesettings .music-player {
        align-items: center;
        height: 22px;
        margin-right: 0;
    }

    .gamehomesettings .play-button,
    .gamehomesettings .volume-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 0 3px;
    }

    .gamehomesnews {
        display: grid;
        grid-template-columns: 226px minmax(0, 1fr) 184px;
        column-gap: 12px;
        align-items: start;
        min-height: 110px;
        width: 100%;
        margin-top: 24px;
    }


    .gamehomenewsnews {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        width: 100%;
        min-height: 78px;
        -webkit-appearance: none;
                appearance: none;
        min-width: 0;
        margin: 0;
        max-width: none;
        box-sizing: border-box;
        padding: 6px 8px;
        border: 1px solid rgba(102, 231, 255, 0.28);
        border-radius: 8px;
        background:
            linear-gradient(90deg, rgba(7, 11, 42, 0.86), rgba(28, 16, 70, 0.74)),
            radial-gradient(circle at 18% 50%, rgba(102, 231, 255, 0.14), transparent 42%);
        color: var(--gt-color-text-primary);
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42), 0 8px 18px rgba(0, 0, 0, 0.2);
        font-family: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }

    .gamehomenewsnews:hover {
        border-color: rgba(102, 231, 255, 0.58);
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42), 0 0 16px rgba(102, 231, 255, 0.22);
        transform: translateY(-1px);
    }

    .gamehomenewsnews:focus-visible {
        outline: 2px solid var(--gt-color-accent-cyan);
        outline-offset: 2px;
    }

    .newsImageFrame {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        overflow: hidden;
        border: 1px solid rgba(255, 211, 77, 0.45);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.28);
        box-shadow: 0 4px 9px rgba(0, 0, 0, 0.36);
    }

    .newsImageFrame #imageContainer {
        width: 100%;
        height: 100%;
    }


    .newsText {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        text-overflow: ellipsis;

    }

    .newsText h1 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
        color: var(--gt-color-accent-magenta);
        font-size: 18px;
        line-height: 1.05;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .newsText p {
        margin: 0;
        padding: 0;
        display: -webkit-box;
        height: auto;
        overflow: hidden;
        color: var(--gt-color-text-primary);
        font-size: 13px;
        line-height: 1.15;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

    }

    .NewsImage {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .headerSocialIcons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: -2px auto 0;
        width: 100%;
        height: 24px;
        color: var(--gt-color-text-secondary);
    }

    .headerSocialIcons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 24px;
        min-width: 0;
        min-height: 0;
        border-radius: 0;
        color: inherit;
    }

    .headerSocialIcons .socialIconName {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .headerSocialIcons .socialIcon {
        height: 18px;
        width: 18px;
        margin-right: 0;
        transition: color 120ms ease, filter 120ms ease;
    }

    .headerSocialIcons a:hover .socialIcon {
        color: var(--gt-color-accent-cyan);
        filter: drop-shadow(0 0 8px rgba(102, 231, 255, 0.55));
    }

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

    .gamehomenewsBrand {
        min-width: 0;
        height: 92px;
    }

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

    .premiumShopMobile {
        display: none;
    }

    .gamehomenewspremiumshop {
        display: flex;
        position: relative;
        width: 176px;
        height: 88px;
        flex: 0 0 auto;
        justify-content: center;
        align-items: flex-end;
        box-sizing: border-box;
        color: #ffffff;
        background-image: url(/344e022288034dfdcac8.png);
        background-size: 128px auto;
        background-repeat: no-repeat;
        background-position: center top;
        text-transform: uppercase;
        text-decoration: none;
        transition: filter 120ms ease, transform 120ms ease;
    }

    .gamehomenewspremiumshop:hover {
        color: #ffffff;
        filter: brightness(1.1) drop-shadow(0 0 12px rgba(177, 104, 255, 0.72));
        transform: translateY(-1px);
    }

    .gamehomenewspremiumshop:focus-visible {
        outline: 2px solid var(--gt-color-reward-gold);
        outline-offset: 2px;
    }

    .premiumShopLabel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 24px;
        box-sizing: border-box;
        padding: 2px 10px 0;
        border: 1px solid rgba(255, 211, 77, 0.88);
        border-radius: 6px;
        background: linear-gradient(180deg, rgba(143, 48, 226, 0.96), rgba(57, 23, 111, 0.98));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 5px 12px rgba(0, 0, 0, 0.38);
        font-family: var(--gt-font-display, "Luckiest Guy", serif);
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0;
        text-shadow: 2px 2px 0 #000, -1px 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8);
        white-space: nowrap;
        -webkit-text-stroke: 0.6px #000000;
    }

    .LogoutBtn {
        position: relative;
        display: inline-block;
        width: 22px;
        height: 22px;
        -webkit-appearance: none;
                appearance: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background-image: url(/a01db80ac56ef45f8ea3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
        cursor: pointer;


    }



    .LogoutBtn:hover {
        filter: hue-rotate(180deg);
    }

    .LogoutBtn:focus-visible {
        outline: 2px solid var(--gt-color-accent-cyan);
        outline-offset: 2px;
    }



    audio {
        height: 20px;
        background-color: black;
    }


    .gamehomenewsContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: none;
        min-width: 0;
        gap: 5px;
        text-shadow: 1px 2px 0 #000;

    }

    .gamehomenewsPromo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 96px;
    }

    .newsDots {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 12px;
    }

    .newsDot {
        height: 9px;
        width: 9px;
        -webkit-appearance: none;
                appearance: none;
        display: block;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        line-height: 0;
        background-color: #bbb;
        border-radius: 50%;
        cursor: pointer;
    }

    .newsDot.current {
        background-color: #ff1b18;
        box-shadow: 0 0 8px rgba(255, 27, 24, 0.72);
    }

    .newsDot:focus-visible {
        outline: 2px solid var(--gt-color-accent-cyan);
        outline-offset: 2px;
    }

    .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;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .gamehomesettings {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px;
        min-height: 32px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
        margin-bottom: 6px;
    }

    .gamehomesettings .music-player {
        align-items: center;
        justify-content: flex-end;
        height: 24px;
        margin-right: 0;
    }

    .gamehomesettings .play-button,
    .gamehomesettings .volume-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 0 3px;
    }

    .gamehomesnews {
        display: flex;
        flex-direction: column;
        gap: 6px;
        height: auto;
        width: 100%;
        justify-content: flex-start;
    }


    .gamehomenewsnews {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 76px;
        -webkit-appearance: none;
                appearance: none;
        min-width: 0;
        margin: 0;
        max-width: none;
        box-sizing: border-box;
        padding: 5px 7px;
        border: 1px solid rgba(102, 231, 255, 0.28);
        border-radius: 8px;
        background:
            linear-gradient(90deg, rgba(7, 11, 42, 0.86), rgba(28, 16, 70, 0.74)),
            radial-gradient(circle at 18% 50%, rgba(102, 231, 255, 0.14), transparent 42%);
        color: var(--gt-color-text-primary);
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42), 0 8px 18px rgba(0, 0, 0, 0.2);
        font-family: inherit;
        text-align: left;
        cursor: pointer;


    }

    .gamehomenewsnews:hover {
        border-color: rgba(102, 231, 255, 0.58);


    }

    .gamehomenewsnews:focus-visible {
        outline: 2px solid var(--gt-color-accent-cyan);
        outline-offset: 2px;
    }

    .newsImageFrame {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        overflow: hidden;
        border: 1px solid rgba(255, 211, 77, 0.45);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.28);
        box-shadow: 0 4px 9px rgba(0, 0, 0, 0.36);
    }

    .newsImageFrame #imageContainer {
        width: 100%;
        height: 100%;
    }



    .newsText {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        text-overflow: ellipsis;

    }

    .newsText h1 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
        color: var(--gt-color-accent-magenta);
        font-size: 18px;
        line-height: 1.05;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .newsText p {
        margin: 0;
        padding: 0;
        display: -webkit-box;
        height: auto;
        overflow: hidden;
        color: var(--gt-color-text-primary);
        font-size: 13px;
        line-height: 1.15;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

    }

    .NewsImage {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .headerSocialIcons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 2px auto 0;
        width: 100%;
        height: 24px;
        color: var(--gt-color-text-secondary);
    }

    .headerSocialIcons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 24px;
        min-width: 0;
        min-height: 0;
        border-radius: 0;
        color: inherit;
    }

    .headerSocialIcons .socialIconName {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .headerSocialIcons .socialIcon {
        height: 18px;
        width: 18px;
        margin-right: 0;
    }

    .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(/65181b1ddd2844101dc4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .premiumShopMobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        box-sizing: border-box;
        padding: 3px 10px 1px;
        border: 1px solid rgba(255, 211, 77, 0.88);
        border-radius: 6px;
        background: linear-gradient(180deg, rgba(143, 48, 226, 0.96), rgba(57, 23, 111, 0.98));
        color: #ffffff;
        font-family: var(--gt-font-display, "Luckiest Guy", serif);
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0;
        text-shadow: 1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.8);
        text-transform: uppercase;
        white-space: nowrap;
        text-decoration: none;
    }

    .gamehomenewspremiumshop {
        display: none;
    }

    .LogoutBtn {
        position: relative;
        display: inline-block;
        width: 22px;
        height: 22px;
        -webkit-appearance: none;
                appearance: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background-image: url(/a01db80ac56ef45f8ea3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
        cursor: pointer;


    }



    .LogoutBtn:hover {
        filter: hue-rotate(180deg);
    }

    .LogoutBtn:focus-visible {
        outline: 2px solid var(--gt-color-accent-cyan);
        outline-offset: 2px;
    }



    audio {
        height: 20px;
        background-color: black;
    }


    .gamehomenewsContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(100% - 16px);
        max-width: none;
        min-width: 0;
        margin: 0 auto;
        gap: 5px;

    }

    .gamehomenewsPromo {
        display: none;
    }

    .newsDots {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 12px;
    }

    .newsDot {
        height: 9px;
        width: 9px;
        -webkit-appearance: none;
                appearance: none;
        display: block;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        line-height: 0;
        background-color: #bbb;
        border-radius: 50%;
        cursor: pointer;
    }

    .newsDot.current {
        background-color: #ff1b18;
        box-shadow: 0 0 8px rgba(255, 27, 24, 0.72);
    }

    .newsDot:focus-visible {
        outline: 2px solid var(--gt-color-accent-cyan);
        outline-offset: 2px;
    }

    .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) {
    .barShopPage .ClubHeader {
        min-height: 142px;
    }
}

@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;
    }
}
@media only screen and (min-width: 700px) {

    .shopSortControls {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin: 0 0 16px;
        flex-wrap: wrap;
    }

    .shopSortLabel {
        color: darkgray;
        font-family: "Luckiest Guy", serif;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .shopSortSelect {
        min-width: 160px;
        max-width: 190px;
        height: 36px;
        padding: 4px 30px 2px 10px;
        border: 1px solid rgba(255, 215, 0, 0.5);
        border-radius: 4px;
        background: rgba(10, 7, 30, 0.9);
        color: #f3e8a6;
        font-family: "Luckiest Guy", serif;
        font-size: 13px;
        letter-spacing: 0;
        line-height: 1;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
    }

    .shopSortControlsInline::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #f3e8a6;
        pointer-events: none;
        transform: translateY(-35%);
    }

    .shopSortSelect:focus-visible {
        outline: 2px solid rgba(102, 231, 255, 0.9);
        outline-offset: 2px;
    }

    .shopBodyWithToolbar {
        margin-top: 0;
    }

    .shopControlBar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 8px;
        padding: 0 8px 8px;
        flex-wrap: wrap;
    }

    .shopControlPrimary {
        display: flex;
        flex: 1 1 520px;
        min-width: 0;
    }

    .shopToolbarControls {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        min-width: 0;
        width: 100%;
    }

    .shopTabControls,
    .shopQuantityButtonGroup,
    .shopQuantityControls {
        display: flex;
        align-items: center;
    }

    .shopControlGroup {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        min-width: 0;
    }

    .shopControlGroup .shopTabControls {
        min-width: 0;
    }

    .shopTabControls {
        gap: 8px;
        flex-wrap: wrap;
    }

    .shopQuantityControls {
        gap: 8px;
        margin-left: auto;
    }

    .shopQuantityButtonGroup {
        gap: 6px;
    }

    .shopControlLabel {
        color: #d8d0c6;
        font-family: "Luckiest Guy", serif;
        font-size: 14px;
        line-height: 1;
        text-transform: uppercase;
    }

    .shopControlButton.YellowButton {
        box-sizing: border-box;
        display: inline-flex;
        border: 1px solid rgba(255, 215, 0, 0.48);
        border-image: none;
        border-radius: 4px;
        min-height: 36px;
        height: 36px;
        min-width: 0;
        margin: 0;
        padding: 1px 14px 0;
        background:
            linear-gradient(180deg, rgba(63, 48, 13, 0.98), rgba(28, 22, 7, 0.98) 72%),
            rgba(18, 14, 5, 0.96);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            inset 0 -10px 16px rgba(0, 0, 0, 0.42),
            0 0 10px rgba(255, 215, 0, 0.16);
        color: #fffdf1;
        cursor: pointer;
        flex-wrap: nowrap;
        font-size: 15px;
        line-height: 1;
        text-transform: uppercase;
        transform: none;
        transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
        white-space: nowrap;
    }

    .shopControlButton.YellowButton:hover {
        border-color: rgba(255, 215, 0, 0.82);
        color: #ffd700;
        transform: none;
    }

    .shopControlButton.YellowButton:focus-visible {
        outline: 2px solid rgba(102, 231, 255, 0.9);
        outline-offset: 2px;
    }

    .shopControlButton.YellowButton.active {
        border-color: #ffd700;
        background:
            linear-gradient(180deg, rgba(91, 69, 10, 0.98), rgba(43, 33, 4, 0.98) 72%),
            rgba(27, 20, 3, 0.98);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 0 12px rgba(255, 215, 0, 0.42);
        color: #ffd700;
        transform: none;
    }

    .shopTabButton {
        min-width: 104px;
    }

    .shopQuantityButton {
        width: 58px;
        padding-right: 0;
        padding-left: 0;
    }

    .shopQuantityButton:last-child {
        width: 74px;
    }

    .shopControlBar .shopSortControls {
        flex: 0 0 auto;
        margin: 0;
        flex-wrap: nowrap;
    }

    .shopControlBarSortOnly {
        justify-content: flex-end;
    }

    .shopControlBar .shopSortSelect {
        min-width: 146px;
        max-width: 160px;
    }

    .shopControlDivider {
        height: 1px;
        margin: 0 8px 10px;
        background: linear-gradient(90deg, transparent, rgba(143, 175, 255, 0.68), transparent);
    }

    .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: 0;
        flex-wrap: wrap;
        width: 100%;
        min-height: 62px;
        margin-top: auto;
        padding: 8px;
        box-sizing: border-box;
        justify-content: flex-start;
        align-items: flex-end;


    }

    .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) {
    .shopSortControls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
        justify-content: center;
    }

    .shopSortLabel {
        width: 100%;
        color: darkgray;
        font-family: "Luckiest Guy", serif;
        font-size: 0.75rem;
        text-transform: uppercase;
        text-align: center;
    }

    .shopSortSelect {
        width: min(100%, 180px);
        padding: 6px 24px 6px 10px;
        border: 1px solid rgba(255, 215, 0, 0.5);
        border-radius: 6px;
        background: rgba(10, 7, 30, 0.9);
        color: #f3e8a6;
        font-family: "Luckiest Guy", serif;
        font-size: 0.72rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .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: 0;
        flex-wrap: wrap;
        width: 100%;
        min-height: 50px;
        margin-top: auto;
        padding: 4px;
        box-sizing: border-box;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .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);
        }
    }
}

@media only screen and (max-width: 699px) {
    .shopControlBar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 0 0 12px;
        padding: 0 8px 10px;
    }

    .shopControlPrimary,
    .shopToolbarControls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-width: 0;
        width: 100%;
    }

    .shopTabControls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .shopControlGroup {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }

    .shopControlGroup .shopTabControls {
        flex: 1 1 auto;
        min-width: 0;
    }

    .shopQuantityControls {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 0;
        width: 100%;
    }

    .shopQuantityButtonGroup {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .shopControlLabel {
        color: #d8d0c6;
        font-family: "Luckiest Guy", serif;
        font-size: 0.74rem;
        line-height: 1;
        text-transform: uppercase;
    }

    .shopControlButton.YellowButton {
        box-sizing: border-box;
        border: 1px solid rgba(255, 215, 0, 0.48);
        border-image: none;
        border-radius: 4px;
        min-width: 0;
        width: auto;
        min-height: 34px;
        height: 34px;
        margin: 0;
        padding: 1px 8px 0;
        background:
            linear-gradient(180deg, rgba(63, 48, 13, 0.98), rgba(28, 22, 7, 0.98) 72%),
            rgba(18, 14, 5, 0.96);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            inset 0 -8px 12px rgba(0, 0, 0, 0.42),
            0 0 8px rgba(255, 215, 0, 0.14);
        color: #fffdf1;
        font-size: 0.72rem;
        line-height: 1;
        text-transform: uppercase;
        transform: none;
        white-space: nowrap;
    }

    .shopControlButton.YellowButton:hover,
    .shopControlButton.YellowButton.active {
        border-color: #ffd700;
        color: #ffd700;
        transform: none;
    }

    .shopControlBar .shopSortControls {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
        flex-wrap: nowrap;
        width: 100%;
    }

    .shopControlBar .shopSortControlsInline::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #f3e8a6;
        pointer-events: none;
        transform: translateY(-35%);
    }

    .shopControlBar .shopSortLabel {
        width: auto;
        flex: 0 0 auto;
        text-align: left;
    }

    .shopControlBar .shopSortSelect {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 34px;
    }

    .shopControlDivider {
        height: 1px;
        margin: 0 8px 10px;
        background: linear-gradient(90deg, transparent, rgba(143, 175, 255, 0.68), transparent);
    }
}

/* 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: 0;
        flex-wrap: wrap;
        width: 100%;
        min-height: 52px;
        margin-top: auto;
        padding: 6px;
        box-sizing: border-box;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .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) {
    .shopSortControls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
        justify-content: center;
    }

    .shopSortLabel {
        width: 100%;
        color: darkgray;
        font-family: "Luckiest Guy", serif;
        font-size: 0.75rem;
        text-transform: uppercase;
        text-align: center;
    }

    .shopSortSelect {
        width: min(100%, 180px);
        padding: 6px 24px 6px 10px;
        border: 1px solid rgba(255, 215, 0, 0.5);
        border-radius: 6px;
        background: rgba(10, 7, 30, 0.9);
        color: #f3e8a6;
        font-family: "Luckiest Guy", serif;
        font-size: 0.72rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .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);
        }
    }
}

/* 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: flex-start;

    /* 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;
}

.requiredXpDebug__YSyOtV12 {
    margin: 1px 0 2px;
    padding-left: 2px;
    font-size: 0.8rem;
    color: #9aa3ad;
    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: 0;
    flex-wrap: wrap;
    width: 100%;
    min-height: 62px;
    margin-top: auto;
    padding: 8px;
    box-sizing: border-box;
    justify-content: flex-start;
    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;
}

.itemBuy__tj8DJylg .serverActionButton__wiQB24Uz {
    flex: 0 0 136px;
    width: 136px;
    min-width: 136px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    font-size: 0.95rem;
}

.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;
    }

    .requiredXpDebug__YSyOtV12 {
        font-size: 0.85rem;
    }

    .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;
    }

    .requiredXpDebug__YSyOtV12 {
        font-size: 0.65rem;
        margin: 1px 0;
        padding-left: 0;
    }

    .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;
        justify-content: flex-start;
        align-items: flex-end;
        min-height: 50px;
        margin-top: auto;
        padding: 4px;
        gap: 4px;
    }

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

    .itemBuy__tj8DJylg .serverActionButton__wiQB24Uz {
        flex-basis: 112px;
        width: 112px;
        min-width: 112px;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        font-size: 0.68rem;
    }

    .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;
    }

    .requiredXpDebug__YSyOtV12 {
        font-size: 0.6rem;
        margin: 1px 0;
        padding-left: 0;
    }

    .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;
        justify-content: flex-start;
        align-items: flex-end;
        min-height: 52px;
        margin-top: auto;
        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;
    }

    .itemBuy__tj8DJylg .serverActionButton__wiQB24Uz {
        flex-basis: 118px;
        width: 118px;
        min-width: 118px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        font-size: 0.72rem;
    }

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

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

.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;
    }
}
/* 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) {
    .inventoryPage {
        --inventory-shell-max-width: 1600px;
    }

    .inventoryPage .inventoryContentShell {
        width: min(100%, var(--inventory-shell-max-width));
        margin: 0 auto;
        box-sizing: border-box;
    }

    .inventoryPage .ClubHeader,
    .inventoryPage .InventoryHeader,
    .inventoryPage .inventoryBody,
    .inventoryPage .grid-flex-container {
        width: 100%;
        box-sizing: border-box;
    }

    .inventoryLogo {
        background-image: url(/e8730cd6002330771ad4.png);
    }

    .itemEquip {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        min-height: 54px;
        margin-top: auto;
        padding: 0 8px 8px 8px;
        box-sizing: border-box;
    }

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

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

    .inventoryPage .InventoryHeader h1 {
        margin-left: 0;
    }

    .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;



        }
    }

    .inventoryBody .grid-flex-container {
        gap: 14px;
        align-items: stretch;
        justify-content: space-between;
        padding-top: 2px;
    }

    .inventoryBody .grid-flex-item {
        box-sizing: border-box;
        flex: 0 0 calc(50% - 7px);
        margin: 0;
        transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
    }

    .inventoryBody .grid-flex-item:hover {
        filter: brightness(1.07);
        transform: translateY(-2px);
        box-shadow: 0 0 14px rgba(102, 231, 255, 0.18);
    }

    .inventoryBody .grid-flex-item .itemImageDescription {
        align-items: flex-start;
        gap: 12px;
        padding: 6px 4px;
    }

    .inventoryBody .grid-flex-item .itemDescription {
        min-width: 0;
        margin-left: 8px;
        text-align: left;
    }

    .inventoryBody .grid-flex-item .itemDescription h2 {
        margin: 2px 0 4px;
        line-height: 1.05;
    }

    .inventoryBody .grid-flex-item .itemDescription p {
        margin: 2px 0 4px;
        line-height: 1.25;
    }

    .inventoryBody .grid-flex-item .itemEquip .YellowButton {
        margin: 0;
        min-width: 94px;
        text-transform: uppercase;
    }

    .inventoryBody .grid-flex-item .itemEquip .server-action-button {
        width: 136px;
        min-width: 136px;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
    }

    .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) {
    .inventoryPage .inventoryContentShell {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .inventoryPage .ClubHeader,
    .inventoryPage .InventoryHeader,
    .inventoryPage .inventoryBody,
    .inventoryPage .grid-flex-container {
        width: 100%;
        box-sizing: border-box;
    }

    .inventoryLogo {
        background-image: url(/e8730cd6002330771ad4.png);
    }

    .itemEquip {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        min-height: 50px;
        margin-top: auto;
        padding: 0 6px 6px 6px;
        box-sizing: border-box;
    }

    .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;
        }
    }

    .inventoryBody .grid-flex-container {
        gap: 8px;
        align-items: stretch;
        justify-content: center;
    }

    .inventoryBody .grid-flex-item {
        margin: 0.35rem;
        transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
    }

    .inventoryBody .grid-flex-item:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 0 10px rgba(102, 231, 255, 0.16);
    }

    .inventoryBody .grid-flex-item .itemImageDescription {
        gap: 8px;
        padding: 6px 4px;
    }

    .inventoryBody .grid-flex-item .itemDescription {
        margin-left: 6px;
    }

    .inventoryBody .grid-flex-item .itemDescription h2 {
        margin: 2px 0 4px;
        line-height: 1.08;
    }

    .inventoryBody .grid-flex-item .itemDescription p {
        margin: 2px 0 4px;
        line-height: 1.25;
    }

    .inventoryBody .grid-flex-item .itemEquip .YellowButton {
        margin: 0;
        min-width: 76px;
        text-transform: uppercase;
    }

    .inventoryBody .grid-flex-item .itemEquip .server-action-button {
        width: 118px;
        min-width: 118px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        font-size: 0.72rem;
    }

    .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;

    }
}

.inventoryCategories__t8RKvu_V {
    width: 100%;
    margin: 6px 0 14px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid rgba(102, 231, 255, 0.32);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(36, 21, 90, 0.74), rgba(7, 11, 42, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 16px rgba(102, 231, 255, 0.14),
        0 6px 16px rgba(0, 0, 0, 0.26);
}

.primaryTabs__jYfdDjEC,
.secondaryTabs__HUkx90Me {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.primaryTabs__jYfdDjEC {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    padding-bottom: 5px;
}

.secondaryTabs__HUkx90Me {
    display: flex;
    gap: 6px;
    min-height: 31px;
    padding: 6px 2px 0;
    border-top: 1px solid rgba(102, 231, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.primaryTab__jeRC3RHm,
.secondaryTab__r5uP257l {
    box-sizing: border-box;
    border: 1px solid transparent;
    color: var(--gt-color-text-secondary, #d7d9f8);
    font-family: var(--gt-font-heading, "Londrina Solid", "Luckiest Guy", sans-serif);
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.primaryTab__jeRC3RHm {
    min-width: 0;
    min-height: 42px;
    padding: 6px 9px 4px;
    border-color: rgba(102, 231, 255, 0.28);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(41, 28, 97, 0.98), rgba(11, 16, 52, 0.98));
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -12px 16px rgba(0, 0, 0, 0.34),
        0 0 10px rgba(102, 231, 255, 0.1);
}

.primaryTab__jeRC3RHm:hover,
.primaryTab__jeRC3RHm:focus-visible {
    border-color: rgba(102, 231, 255, 0.78);
    color: var(--gt-color-accent-cyan, #66e7ff);
    box-shadow:
        0 0 14px rgba(102, 231, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -12px 16px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.primaryTab__jeRC3RHm.active__qlLplOY5 {
    border-color: rgba(240, 76, 255, 0.9);
    background:
        linear-gradient(180deg, rgba(240, 76, 255, 0.95), rgba(117, 56, 214, 0.94) 48%, rgba(42, 19, 95, 0.98));
    color: #ffffff;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.72),
        0 0 9px rgba(255, 255, 255, 0.32);
    box-shadow:
        0 0 20px rgba(240, 76, 255, 0.34),
        0 0 12px rgba(102, 231, 255, 0.18),
        inset 0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 -8px 14px rgba(7, 11, 42, 0.36);
    transform: translateY(1px);
}

.secondaryTab__r5uP257l {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 5px 11px 3px;
    border-color: rgba(102, 231, 255, 0.3);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(14, 22, 62, 0.94), rgba(5, 9, 31, 0.96));
    color: rgba(215, 217, 248, 0.84);
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.84);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 9px rgba(102, 231, 255, 0.1);
}

.secondaryTab__r5uP257l:hover,
.secondaryTab__r5uP257l:focus-visible {
    border-color: rgba(102, 231, 255, 0.78);
    color: var(--gt-color-accent-cyan, #66e7ff);
    box-shadow:
        0 0 11px rgba(102, 231, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.secondaryTab__r5uP257l.active__qlLplOY5 {
    border-color: rgba(102, 231, 255, 0.95);
    background:
        linear-gradient(180deg, rgba(102, 231, 255, 0.92), rgba(44, 141, 216, 0.86));
    color: #07102b;
    text-shadow: none;
    box-shadow:
        0 0 15px rgba(102, 231, 255, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -7px 12px rgba(7, 11, 42, 0.18);
}

.primaryTab__jeRC3RHm:focus-visible,
.secondaryTab__r5uP257l:focus-visible {
    outline: 2px solid rgba(102, 231, 255, 0.52);
    outline-offset: 2px;
}

@media only screen and (max-width: 1023px) {
    .primaryTabs__jYfdDjEC {
        gap: 14px;
    }

    .primaryTab__jeRC3RHm {
        font-size: 14px;
    }
}

@media only screen and (max-width: 700px) {
    .inventoryCategories__t8RKvu_V {
        margin: 6px 0 10px;
        padding: 6px;
    }

    .primaryTabs__jYfdDjEC {
        display: flex;
        gap: 6px;
    }

    .primaryTab__jeRC3RHm {
        flex: 0 0 auto;
        min-width: 98px;
        min-height: 40px;
        padding-inline: 8px;
        font-size: 13px;
    }

    .secondaryTabs__HUkx90Me {
        min-height: 32px;
        padding-top: 6px;
    }

    .secondaryTab__r5uP257l {
        min-height: 28px;
        padding: 6px 10px 4px;
        font-size: 11px;
    }
}

@media only screen and (max-width: 420px) {
    .primaryTab__jeRC3RHm {
        min-width: 92px;
        font-size: 12px;
    }
}

.travelBody__pcMyNJkP {
    width: min(100%, var(--gt-stage-max-width-wide, 1100px));
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    color: var(--gt-color-text-primary, #ffffff);
    font-family: var(--gt-font-body, "Trebuchet MS", sans-serif);
}

.lockReasons___tfGWejF {
    color: var(--gt-color-reward-gold, #ffd34d);
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 1rem;
    line-height: 1.25;
    text-align: left;
    text-shadow: 1px 1px 0 #000000;
}

.regionExplorer__CNOX35b3 {
    position: relative;
    display: grid;
    grid-template-areas:
        "map details"
        "grounds grounds";
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    overflow: hidden;
    padding: 14px;
    border: 2px solid rgba(102, 231, 255, 0.32);
    background:
        radial-gradient(circle at 28% 22%, rgba(102, 231, 255, 0.14), transparent 34%),
        radial-gradient(circle at 77% 10%, rgba(255, 211, 77, 0.08), transparent 28%),
        linear-gradient(145deg, rgba(38, 19, 87, 0.94), rgba(15, 12, 48, 0.96) 58%, rgba(23, 15, 72, 0.96));
    box-shadow:
        inset 0 0 46px rgba(2, 5, 20, 0.52),
        0 18px 42px rgba(0, 0, 0, 0.38);
}

.mapColumn__cmYTdmw8,
.detailColumn__icU3f89Y,
.huntingGroundSection__u_yhV5vH {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.mapColumn__cmYTdmw8 {
    grid-area: map;
}

.detailColumn__icU3f89Y {
    grid-area: details;
    display: grid;
    gap: 14px;
}

.huntingGroundSection__u_yhV5vH {
    grid-area: grounds;
    padding-top: 4px;
    border-top: 1px solid rgba(102, 231, 255, 0.22);
}

.regionHero__nwVooJZM {
    position: relative;
    overflow: hidden;
    height: 220px;
    border: 2px solid rgba(154, 164, 217, 0.64);
    background:
        linear-gradient(180deg, rgba(24, 18, 66, 0.88), rgba(8, 10, 34, 0.96));
    box-shadow:
        inset 0 0 28px rgba(102, 231, 255, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.34);
}

.regionHero__nwVooJZM > div:first-child {
    height: 100%;
}

.regionHero__nwVooJZM::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 5, 18, 0.02), rgba(3, 5, 18, 0.62)),
        radial-gradient(circle at 50% 25%, rgba(102, 231, 255, 0.2), transparent 46%);
}

.regionHeroImage__GOxgccEO {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.regionHeroCaption__JJGIU4Hi {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 10px;
    max-width: calc(100% - 28px);
}

.regionHeroCount__FMyEJwBE {
    margin-bottom: 3px;
    color: var(--gt-color-accent-blue, #3fc3ff);
    font-family: var(--gt-font-display, "Luckiest Guy", sans-serif);
    font-size: 0.98rem;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000000;
}

.regionHeroName__ccEeDJqF {
    margin: 0;
    color: #ffffff;
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 1.65rem;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #000000, 0 0 12px rgba(102, 231, 255, 0.32);
    overflow-wrap: anywhere;
}

.selectedHuntingGround__XQHmIibi {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(154, 164, 217, 0.58);
    background:
        linear-gradient(160deg, rgba(45, 20, 98, 0.78), rgba(14, 12, 45, 0.84));
    box-shadow:
        inset 0 0 24px rgba(102, 231, 255, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.26);
}

.selectedContent__K6Dk9Jt_ {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.detailImageCard__jy54zVpA {
    position: relative;
    width: 230px;
    max-width: none;
    box-sizing: border-box;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.46));
}

.detailPhotoImageWrap__iA4KQVhn {
    position: relative;
    overflow: visible;
    width: 100%;
    aspect-ratio: 282 / 214;
}

.detailPhotoImageWrap__iA4KQVhn > div:first-child {
    width: 100%;
    height: 100%;
}

.detailPhotoImage__yEYaWInt {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.currentDetailImage__yqn2Xm65 {
    filter:
        drop-shadow(0 0 14px rgba(102, 231, 255, 0.72)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.46));
}

.lockedDetailImage__kxSksyvf .detailPhotoImage__yEYaWInt {
    filter: grayscale(0.78) brightness(0.68);
}

.detailPhotoLock__HapNH0CA {
    position: absolute;
    top: 41%;
    left: 50%;
    z-index: 3;
    width: 32px;
    height: 48px;
    background-image: url(/270c5a841c789df0eea0.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.selectedDescription__V5ofqSXX {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding-top: 2px;
}

.selectedDescription__V5ofqSXX h2 {
    margin: 0;
    color: #ffffff;
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 1.55rem;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #000000;
    min-height: 50px;
    max-height: 50px;
    overflow: auto;
}

.selectedDescription__V5ofqSXX p {
    margin: 0;
    color: var(--gt-color-text-secondary, #d7d9f8);
    font-size: 0.95rem;
    line-height: 1.35;
    min-height: 64px;
    max-height: 150px;
    overflow: auto;
}

.selectedFooter__PHQaYJa3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding-top: 10px;
    border-top: 1px solid rgba(102, 231, 255, 0.18);
}

.requirements__kT72XFzQ {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.requirementChip__LTnZxjhZ {
    position: relative;
    min-width: 82px;
    min-height: 56px;
    padding: 7px 9px;
    box-sizing: border-box;
    border: 1px solid rgba(102, 231, 255, 0.35);
    background: rgba(6, 8, 28, 0.66);
    text-align: center;
}

.requirementMet__sKL6bK8i {
    border-color: rgba(92, 255, 188, 0.66);
    background:
        linear-gradient(180deg, rgba(15, 82, 66, 0.7), rgba(6, 24, 35, 0.78));
    box-shadow:
        inset 0 0 14px rgba(92, 255, 188, 0.16),
        0 0 10px rgba(92, 255, 188, 0.12);
}

.requirementUnmet__fYhdYOV_ {
    border-color: rgba(255, 100, 142, 0.72);
    background:
        linear-gradient(180deg, rgba(86, 24, 58, 0.72), rgba(24, 9, 35, 0.82));
    box-shadow:
        inset 0 0 14px rgba(255, 100, 142, 0.18),
        0 0 10px rgba(255, 100, 142, 0.14);
}

.requirementValue__xv1iqWXD {
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 1.25rem;
    line-height: 1;
    text-shadow: 1px 1px 0 #000000;
}

.requirementLabel__tZNxKtJ_ {
    margin-top: 2px;
    color: var(--gt-color-text-muted, #a8add6);
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 0.74rem;
    line-height: 1;
    text-transform: uppercase;
}

.requirementStatus__B1HlKQib {
    margin-top: 4px;
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 0.68rem;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000000;
}

.requirementMet__sKL6bK8i .requirementStatus__B1HlKQib {
    color: #5cffbc;
}

.requirementUnmet__fYhdYOV_ .requirementStatus__B1HlKQib {
    color: #ff8cac;
}

.xpRequirement__g13nteyR .requirementValue__xv1iqWXD {
    color: var(--gt-color-accent-violet, #b168ff);
}

.costRequirement__WrFmSMy6 .requirementValue__xv1iqWXD {
    color: var(--gt-color-reward-gold, #ffd34d);
}

.paidRequirement__vBC3i7gK {
    opacity: 0.72;
}

.paidRequirement__vBC3i7gK .requirementValue__xv1iqWXD {
    color: var(--gt-color-text-muted, #a8add6);
    text-decoration: line-through;
}

.keyRequirement__S760W3e4 .requirementValue__xv1iqWXD,
.baitRequirement__UNRH_iU7 .requirementValue__xv1iqWXD {
    color: var(--gt-color-accent-cyan, #66e7ff);
}

.neededItem__LEx86LJS {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.travelButtonRow__WWsZI8u5 {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
}

.travelButton__czw3KhLi {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 114px;
    height: 55px;
    padding: 9px 0 0;
    border: 0;
    color: #ffffff;
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 1px 1px 0 #000000;
    cursor: pointer;
    background-color: transparent;
    background-image: url(/5860d2d548f21e2abf84.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.travelButton__czw3KhLi:hover:not(:disabled),
.travelButton__czw3KhLi:focus-visible:not(:disabled) {
    color: var(--gt-color-accent-cyan, #66e7ff);
    filter: drop-shadow(0 0 8px rgba(102, 231, 255, 0.45));
    outline: none;
}

.travelButton__czw3KhLi:disabled {
    cursor: not-allowed;
    filter: grayscale(0.7);
    opacity: 0.66;
}

.huntingGroundGrid__otu6NHWz {
    display: grid;
    grid-template-columns: repeat(auto-fill, 136px);
    gap: 14px;
    justify-content: start;
}

.sectionTitle__zVyLxz8T {
    margin-bottom: 10px;
    color: var(--gt-color-accent-blue, #3fc3ff);
    font-family: var(--gt-font-display, "Luckiest Guy", sans-serif);
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000000;
}

.huntingGroundTile__SBTuoIQ5 {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    background: transparent;
}

.huntingGroundTile__SBTuoIQ5:hover .photoFrame__Ncix3ssk,
.huntingGroundTile__SBTuoIQ5:focus-visible .photoFrame__Ncix3ssk {
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42));
    transform: translateY(-5px) scale(1.035) rotate(-1deg);
}

.selectedTile__cG3t4zpi .photoFrame__Ncix3ssk {
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.44));
}

.currentTile__yfDBRR8h .photoFrame__Ncix3ssk {
    filter:
        drop-shadow(0 0 10px rgba(255, 211, 77, 0.5)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.44));
}

.huntingGroundTile__SBTuoIQ5:focus-visible {
    outline: 2px solid var(--gt-color-accent-cyan, #66e7ff);
    outline-offset: 3px;
}

.photoFrame__Ncix3ssk {
    position: relative;
    display: block;
    width: 136px;
    max-width: none;
    aspect-ratio: 282 / 214;
    transition: transform 150ms ease, filter 150ms ease;
}

.photoFrame__Ncix3ssk > div:first-child {
    position: absolute;
    inset: 0;
}

.photoImage__o3EC9hRr {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photoName__RKPDkgaa {
    position: absolute;
    right: 14%;
    bottom: 17%;
    left: 14%;
    z-index: 3;
    display: flex;
    min-height: 16%;
    align-items: center;
    justify-content: center;
    color: #241938;
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 0.9;
    text-align: center;
    text-shadow: none;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.currentText__mDcwUZwN {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: var(--gt-color-reward-gold, #ffd34d);
    font-family: var(--gt-font-heading, "Londrina Solid", sans-serif);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 1px 1px 0 #000000, 0 0 8px rgba(255, 211, 77, 0.34);
    text-transform: uppercase;
}

.lockedTile__l1F7Qvay .photoImage__o3EC9hRr {
    filter: grayscale(0.72) brightness(0.72);
}

.photoLock__TmQS2fEq {
    position: absolute;
    z-index: 3;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.photoLock__TmQS2fEq {
    top: 34%;
    left: 50%;
    width: 25px;
    height: 38px;
    transform: translateX(-50%);
    background-image: url(/270c5a841c789df0eea0.png);
}

.mapPanel__TgWIjfTo {
    position: relative;
    width: 320px;
    max-width: none;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid rgba(102, 231, 255, 0.28);
    background:
        radial-gradient(circle at 50% 38%, rgba(23, 105, 156, 0.28), transparent 46%),
        linear-gradient(180deg, rgba(9, 17, 55, 0.68), rgba(8, 7, 30, 0.82));
    box-shadow:
        inset 0 0 30px rgba(102, 231, 255, 0.11),
        0 14px 32px rgba(0, 0, 0, 0.34);
}

.mapPanel__TgWIjfTo::before {
    position: absolute;
    inset: 8px;
    z-index: 0;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.09);
    pointer-events: none;
}

.mapCanvas__WzzmhKMB {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 547 / 626;
    cursor: default;
    isolation: isolate;
}

.mapCanvas__WzzmhKMB::after {
    position: absolute;
    inset: 0;
    z-index: 21;
    content: "";
    background:
        linear-gradient(90deg, rgba(8, 7, 30, 0.28), transparent 18%, transparent 82%, rgba(8, 7, 30, 0.28)),
        linear-gradient(180deg, rgba(8, 7, 30, 0.18), transparent 16%, transparent 82%, rgba(8, 7, 30, 0.34));
    pointer-events: none;
}

.mapCanvasActive__lfxtHmOP {
    cursor: pointer;
}

.mapRegion__Qt74opVj {
    position: absolute;
    z-index: var(--map-region-z-index);
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: transparent;
    background-image: var(--region-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.mapRegion__Qt74opVj:focus-visible,
.mapRegionHovered__tNd5Ej0Q,
.mapRegionSelected__yOQgeud8 {
    background-image: var(--region-hover-image);
    outline: none;
    filter: drop-shadow(0 0 10px rgba(102, 231, 255, 0.42));
}

.mapRegion__Qt74opVj:focus-visible {
    outline: 2px solid var(--gt-color-accent-cyan, #66e7ff);
    outline-offset: 2px;
}

.mapRegionCurrent__Kh5WYJs6 {
    filter: drop-shadow(0 0 12px rgba(255, 211, 77, 0.58));
}

.mapRegionLocked__Tm5p2khl {
    cursor: pointer;
}

.mapLock__nezVjEL2 {
    position: absolute;
    top: var(--lock-top);
    left: var(--lock-left);
    width: 25px;
    height: 38px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mapOverlay__cJ_uJ3N9 {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mapIconOverlay__jYIK8wfe {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

.mapLockRegion__ml2XND_g {
    position: absolute;
    pointer-events: none;
}

.emptyState__jvgO0DPf {
    padding: 18px;
    border: 1px solid rgba(102, 231, 255, 0.3);
    color: var(--gt-color-text-secondary, #d7d9f8);
    background: rgba(6, 8, 28, 0.72);
    text-align: center;
}

@media only screen and (max-width: 700px) {
    .regionExplorer__CNOX35b3 {
        grid-template-areas:
            "map"
            "details"
            "grounds";
        grid-template-columns: 1fr;
    }

    .mapPanel__TgWIjfTo {
        width: 100%;
        max-width: 320px;
    }
}

@media only screen and (max-width: 700px) {
    .travelBody__pcMyNJkP {
        padding: 10px;
    }

    .regionHero__nwVooJZM,
    .regionHeroImage__GOxgccEO {
        height: 176px;
    }

    .regionHeroName__ccEeDJqF {
        font-size: 1.35rem;
    }

    .selectedContent__K6Dk9Jt_,
    .selectedFooter__PHQaYJa3 {
        grid-template-columns: 1fr;
    }

    .selectedHuntingGround__XQHmIibi {
        padding: 10px;
    }

    .detailImageCard__jy54zVpA {
        width: min(100%, 230px);
        margin: 0 auto;
    }

    .requirements__kT72XFzQ {
        gap: 6px;
    }

    .requirementChip__LTnZxjhZ {
        flex: 1 1 92px;
    }

    .huntingGroundGrid__otu6NHWz {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 10px;
    }

    .photoFrame__Ncix3ssk {
        width: min(136px, 100%);
    }

    .photoName__RKPDkgaa {
        font-size: 0.72rem;
    }
}

/* @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);

}

.enemyImageBackground_regular,
.enemyImageBackground_midnight,
.enemyImageBackground_nessy,
.enemyImageBackground_gift,
.enemyImageBackground_special,
.enemyImageBackground_monster,
.enemyImageBackground_enigma,
.enemyImageBackground_rainbow,
.enemyImageBackground_secret {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.enemyImageBackground_crystal {
    background-image: url(/4c306b3f3abfc250e07e.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #0a2833;
}



.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;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    color: #f2e9ff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}

/* .enemyPopupImage {
        width: 300px;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 20px;
        ;
    } */

.popup-content {
    width: min(92vw, 560px);
    margin-top: 30px;
    margin-bottom: 30px;

    position: relative;
    border-image: url(/6040b3398bf7efa6feb2.png);
    border-style: solid;
    border-width: 44px;
    border-image-slice: 60 fill;
    padding: 0;
    box-sizing: border-box;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    transition: all 0.3s ease-in-out;
    /* overflow: hidden; */
}

.grimoireFilters {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 10;

}

.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: -25px;
    padding: 18px 18px 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    .enemyImageBackground {
        top: 42px;

        margin: 0 auto 140px auto;
        width: 210px;
        height: 210px;

        .enemyImage {
            width: 200px;
            height: 200px;
        }
    }

    .enemy-details {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .photoalbum-location {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        background: rgba(9, 12, 18, 0.35);
    }

    .photoalbum-location-title {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #d6c7f0;
    }

    .photoalbum-location-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .photoalbum-location-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .photoalbum-location-region {
        font-size: 12px;
        font-weight: bold;
        color: #ffd487;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    .photoalbum-location-grounds {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .photoalbum-location-chip {
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 11px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #e9ddff;
    }

    .photoalbum-location-empty {
        font-size: 12px;
        color: #e0c7ff;
    }

    .photoalbum-loot-header {
        display: flex;
        flex-wrap: wrap;
        /* bottom: 90px; */
        position: relative;
        font-size: 16px;
    }

    .photoalbum-loot {
        display: flex;
        flex-wrap: wrap;
        min-height: 40px;
        position: relative;
        font-size: 14px;
        width: 100%;
        justify-content: flex-start;
        align-content: start;
        gap: 8px 16px;
        padding-bottom: 8px;
    }

    .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: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .Row {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        /* align-items: center; */
        margin-bottom: 10px;
    }

    .RowPhotoAlbumInfoBoxes {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        width: 100%;
        min-height: 40px;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 8px 0;

        .XPRow,
        .GBPRow,
        .PHRow,
        .GHRow {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;
        }

        .xpimg {
            background-image: url(/f606ea621fd01bdc4e71.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }

        .phuntedimg {
            background-image: url(/1716b88bc0717dc1a398.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }

        .ghuntedimg {
            background-image: url(/64c5bd900090d9cd4a00.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }

        .value {
            text-align: center;
            align-content: center;
            font-size: 14px;
        }
    }

}

.photoalbum-popup-portrait {
    position: relative;
    width: 240px;
    height: 332px;
    margin: 0 auto 8px auto;
    flex: 0 0 auto;
}

.popup-content-content .photoalbum-popup-image-bg {
    position: absolute;
    top: 38px;
    left: 17px;
    width: 205px;
    height: 205px;
    margin: 0;
    border-radius: 2px;
    overflow: hidden;
    z-index: 1;
}

.popup-content-content .photoalbum-popup-enemy-image {
    width: 205px;
    height: 205px;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}

.photoalbum-popup-enemy-name {
    position: absolute;
    top: 250px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 3;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #f2e9ff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
    max-height: 2.4em;
    font-size: 1.3em;
}

.pictureFrame {
    display: flex;
    position: absolute;
    background-image: url(/a777ace5933a6b3c5b28.png);
    background-position: center;
    background-size: contain;
    width: 240px;
    height: 332px;
    margin: 0;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.close-button {
    position: absolute;
    top: -20px;
    right: -39px;
    background: transparent;
    color: #e6d7ff;
    border: none;
    padding: 0;
    /* font-size: 26px; */
    line-height: 1;
    cursor: pointer;
    z-index: 3000;
    font-family: 'Luckiest Guy';
    font-size: 30px;
}

/* } */

@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);
    }

    .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: auto;
        padding: 10px 0;
    }

    .popup-content {
        width: min(94vw, 420px);
        margin-top: 20px;
        margin-bottom: 20px;
        position: relative;
        border-image: url(/6040b3398bf7efa6feb2.png);
        border-style: solid;
        border-width: 34px;
        border-image-slice: 60 fill;
        padding: 0;
        box-sizing: border-box;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);

    }

    .popup-content-content {
        margin: -12px;
        padding: 12px 12px 16px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        .enemyImageBackground {
            top: 8px;
            margin: 0 auto 115px auto;
            width: 170px;
            height: 170px;

            .enemyImage {
                width: 160px;
                height: 160px;
            }
        }

        .enemy-details {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .photoalbum-location {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 8px 10px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            background: rgba(9, 12, 18, 0.35);
        }

        .photoalbum-location-title {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #d6c7f0;
        }

        .photoalbum-location-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .photoalbum-location-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .photoalbum-location-region {
            font-size: 11px;
            font-weight: bold;
            color: #ffd487;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .photoalbum-location-grounds {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .photoalbum-location-chip {
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 10px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #e9ddff;
        }

        .photoalbum-location-empty {
            font-size: 11px;
            color: #e0c7ff;
        }

        .RowPhotoAlbumInfoBoxes {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            min-height: 36px;
            justify-content: space-around;
            align-items: center;
            gap: 6px 12px;
            padding: 6px 0;

            .XPRow,
            .GBPRow,
            .PHRow,
            .GHRow {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 3px;
            }

            .xpimg,
            .phuntedimg,
            .ghuntedimg {
                width: 24px;
                height: 24px;
                flex-shrink: 0;
            }

            .value {
                font-size: 12px;
            }
        }

        .photoalbum-loot-header {
            font-size: 14px;
        }

        .photoalbum-loot {
            display: flex;
            flex-wrap: wrap;
            min-height: 30px;
            font-size: 12px;
            width: 100%;
            justify-content: flex-start;
            gap: 6px 12px;
            padding-bottom: 6px;
        }

        .loot-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 3px;

            .photoalbum-loot-image {
                height: 16px;
            }

            .loot-name {
                font-size: 11px;
            }

            .loot-amount {
                font-size: 11px;
            }
        }
    }

    .photoalbum-popup-portrait {
        width: 210px;
        height: 290px;
        margin-bottom: 6px;
    }

    .popup-content-content .photoalbum-popup-image-bg {
        top: 33px;
        left: 15px;
        width: 180px;
        height: 180px;
    }

    .popup-content-content .photoalbum-popup-enemy-image {
        width: 180px;
        height: 180px;
    }

    .pictureFrame {
        width: 210px;
        height: 290px;
    }

    .photoalbum-popup-enemy-name {
        top: 218px;
        padding: 0 18px;
        font-size: 16px;
    }

    .close-button {
        position: absolute;

        background: transparent;
        color: #e6d7ff;
        border: none;
        padding: 0;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        z-index: 3000;
    }
}

.statImg {
    width: 30px;
    height: auto;
}
.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;

}
.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 */
}

.emailActivationStatus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.5);
}

.emailActivationBadge {
    font-weight: bold;
    text-transform: uppercase;
}

.emailActivationBadge.activated {
    color: #3ddc84;
}

.emailActivationBadge.pending {
    color: #f3be4a;
}

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

.emailActivationActions button {
    align-self: flex-start;
}

.emailActivationMessage {
    font-size: 13px;
}

.newsletterPreferenceForm {
    gap: 8px;
}

.newsletterPreferenceHeader {
    font-size: 18px;
    font-weight: 700;
}

.newsletterPreferenceToggle {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.newsletterPreferenceToggle input {
    margin: 0;
}

.newsletterPreferenceMessage {
    font-size: 13px;
}

.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;
        }
    }
}
.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;
}
.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(/16c2711ac8578c0dfaf8.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;
}

body.game-sidebar-open {
    overflow: hidden;
}

/* 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%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s ease-out, visibility 0s linear 0.3s;
        z-index: 9998;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebarContainer__VcyGQUbA.open__yAmGp7c7 {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.3s ease-out;
    }

    .sidebarContainer__VcyGQUbA:focus {
        outline: none;
    }

    .sidebarBackdrop__hJuYMPMi {
        position: fixed;
        inset: 0;
        z-index: 9997;
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(3, 5, 16, 0.64);
        cursor: pointer;
    }

    /* Toggle Button */
    .sidebarToggle__wKdyGv4w {
        position: fixed;
        top: 15px;
        left: 15px;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        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,
    .sidebarToggle__wKdyGv4w:focus-visible {
        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);
    }

    .sidebarToggle__wKdyGv4w.open__yAmGp7c7:hover,
    .sidebarToggle__wKdyGv4w.open__yAmGp7c7:focus-visible {
        background: #8ff3ff;
        border-color: #ffffff;
    }

    .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);
    }

    .sideBarNavigation__C3aRvD85 a:focus-visible,
    .TravelButton__YuvlHA24:focus-visible,
    .UserName__wCQWm2hn a:focus-visible {
        outline: 2px solid var(--ghost-accent);
        outline-offset: 2px;
    }

    .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,
    .sidebarBackdrop__hJuYMPMi {
        display: none !important;
    }
}

.postserviceLogo {
    background-image: url(/13664bd4e23df0bc6dd2.png);
}

.postservice-page .ClubHeaderDescriptionText {
    max-width: 420px;
}

.postservice-content-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 884px);
    max-width: 884px;
    margin: 0 auto;
    box-sizing: border-box;
}

.postservice-navigation-row {
    position: relative;
    top: 0;
    margin-left: 0;
    gap: 8px;
}

.postservice-panel {
    width: 100%;
    border: 2px solid rgba(138, 43, 226, 0.55);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16, 12, 24, 0.96), rgba(10, 8, 17, 0.95));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    padding: 14px;
    box-sizing: border-box;
}

.postservice-panel-title {
    margin: 0 0 12px 0;
    color: #d4c3ff;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.postservice-loading,
.postservice-empty-state,
.postservice-help-text {
    color: #c5bdd8;
    font-size: 14px;
}

.postservice-mail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.postservice-mail-card {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(8, 7, 14, 0.82);
    color: #f5f2ff;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.postservice-mail-card:hover {
    border-color: rgba(146, 109, 255, 0.8);
    background: rgba(20, 16, 33, 0.92);
    transform: translateY(-1px);
}

.postservice-mail-card.is-unread {
    border-color: rgba(107, 171, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(107, 171, 255, 0.35);
}

.postservice-mail-top-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.postservice-mail-sender {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.postservice-mail-time {
    color: #b8b0ca;
    font-size: 12px;
    white-space: nowrap;
}

.postservice-mail-preview {
    margin-top: 8px;
    color: #ddd8ea;
    line-height: 1.45;
}

.postservice-mail-attachment-indicator,
.postservice-mail-unread-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 18px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0 7px;
}

.postservice-mail-attachment-indicator {
    background: rgba(146, 109, 255, 0.22);
    color: #d8c6ff;
    border: 1px solid rgba(146, 109, 255, 0.56);
}

.postservice-mail-unread-indicator {
    background: rgba(255, 128, 120, 0.2);
    color: #ff8f87;
    border: 1px solid rgba(255, 128, 120, 0.48);
}

.postservice-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.postservice-label {
    color: #cfbfff;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.postservice-input,
.postservice-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(7, 8, 14, 0.93);
    color: #f0eef8;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
}

.postservice-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.45;
}

.postservice-input:focus,
.postservice-textarea:focus {
    outline: none;
    border-color: rgba(146, 109, 255, 0.92);
    box-shadow: 0 0 0 2px rgba(146, 109, 255, 0.24);
}

.postservice-error-message {
    border: 1px solid rgba(255, 120, 120, 0.5);
    background: rgba(68, 8, 8, 0.75);
    color: #ffb8b8;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

.postservice-suggestions-wrapper {
    position: relative;
}

.postservice-suggestions-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(10, 11, 18, 0.98);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

.postservice-suggestion-item {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #efebff;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
}

.postservice-suggestion-item:last-child {
    border-bottom: none;
}

.postservice-suggestion-item:hover {
    background: rgba(107, 171, 255, 0.2);
    color: #dcecff;
}

.postservice-attachment-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.postservice-selected-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(8, 8, 13, 0.84);
    padding: 8px;
}

.postservice-selected-attachment-image {
    width: 42px;
    height: 42px;
}

.postservice-selected-attachment-name {
    color: #f7f3ff;
    font-weight: 700;
}

.postservice-selected-attachment-amount {
    color: #c3b9d9;
    font-size: 13px;
}

.postservice-amount-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.postservice-amount-input {
    width: 120px;
}

.postservice-form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.postservice-read-panel {
    padding-top: 10px;
}

.postservice-read-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.postservice-read-content {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(8, 8, 13, 0.84);
    padding: 14px;
}

.postservice-read-title {
    margin: 0;
    color: #d4c3ff;
    font-size: 20px;
}

.postservice-read-time {
    margin-top: 4px;
    margin-bottom: 12px;
    color: #b8b0ca;
    font-size: 13px;
}

.postservice-read-message {
    color: #ece7fb;
    line-height: 1.55;
    white-space: pre-wrap;
}

.postservice-read-attachment {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(19, 17, 27, 0.72);
    padding: 10px;
}

.postservice-read-attachment h4 {
    margin: 0 0 8px 0;
    color: #cdbaff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.postservice-read-attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(10, 10, 16, 0.84);
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.postservice-read-attachment-item:hover {
    border-color: rgba(146, 109, 255, 0.72);
    background: rgba(18, 15, 30, 0.92);
    transform: translateY(-1px);
}

.postservice-read-attachment-image {
    width: 46px;
    height: 46px;
}

.postservice-read-attachment-name {
    color: #f6f3ff;
    font-weight: 700;
}

.postservice-coming-soon {
    padding: 40px;
    text-align: center;
    font-size: 1.5em;
    color: #c5bdd8;
}

.postservice-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.postservice-modal {
    width: min(960px, 96vw);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(146, 109, 255, 0.56);
    border-radius: 10px;
    background: linear-gradient(180deg, #12111b, #0b0b13);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.52);
}

.postservice-preview-modal {
    width: min(720px, 96vw);
}

.postservice-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.postservice-modal-header h3 {
    margin: 0;
    color: #d3c1ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.postservice-modal-close {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.06);
    color: #f4f2fa;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-weight: 700;
}

.postservice-modal-close:hover {
    border-color: rgba(146, 109, 255, 0.8);
    color: #d9cbff;
}

.postservice-modal-controls {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.postservice-preview-modal-body {
    padding: 14px;
    overflow-y: auto;
}

.postservice-preview-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.postservice-preview-summary {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.postservice-preview-image {
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
}

.postservice-preview-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.postservice-preview-title {
    margin: 0;
    font-size: 24px;
}

.postservice-preview-type {
    color: #cdbaff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

.postservice-preview-flavor {
    margin: 0;
    color: #ece7fb;
    line-height: 1.55;
    white-space: pre-wrap;
}

.postservice-preview-stats {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(15, 14, 22, 0.82);
    padding: 10px;
}

.postservice-category-sections {
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.postservice-category-section {
    margin-bottom: 10px;
}

.postservice-category-section:last-child {
    margin-bottom: 0;
}

.postservice-category-section-title {
    color: #cdbaff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.postservice-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.postservice-category-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: #e9e6f5;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
}

.postservice-category-tab:hover {
    border-color: rgba(146, 109, 255, 0.7);
    color: #d9cbff;
}

.postservice-category-tab.is-active {
    border-color: rgba(146, 109, 255, 0.84);
    background: rgba(146, 109, 255, 0.2);
    color: #e2d7ff;
}

.postservice-category-icon {
    width: 14px;
    display: inline-flex;
    justify-content: center;
}

.postservice-category-count {
    display: inline-flex;
    min-width: 18px;
    justify-content: center;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 11px;
}

.postservice-modal-list {
    padding: 12px 14px;
    overflow: auto;
    flex: 1;
}

.postservice-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.postservice-attachment-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(18, 17, 27, 0.92);
    color: #f0edf9;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.postservice-attachment-card:hover {
    border-color: rgba(146, 109, 255, 0.78);
    transform: translateY(-1px);
}

.postservice-page .YellowButton,
.postservice-page .BlueButton,
.postservice-page .PurpleButton,
.postservice-page .RedButton {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border-style: solid;
    border-width: 4px;
    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 12px 0 12px;
    margin: 0;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s, color 0.1s, opacity 0.1s;
    cursor: pointer;
}

.postservice-page .YellowButton {
    border-image: url(/82f2e6406caf3f576073.png);
}

.postservice-page .BlueButton {
    border-image: url(/5860967ce6d8fe8357a0.png);
}




.postservice-page .PurpleButton:hover,
.postservice-page .RedButton:hover {
    transform: scale(1.05);
}

.postservice-page .RedButton:hover {
    color: #ffd4d4;
}

.postservice-read-header-row .RedButton {
    min-width: 148px;
}

.postservice-read-header-row .RedButton[aria-disabled="true"] {
    cursor: not-allowed;
    transform: none;
}

.postservice-attachment-image {
    width: 42px;
    height: 42px;
}

.postservice-attachment-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.postservice-attachment-meta {
    color: #c2b8d8;
    font-size: 12px;
}

.postservice-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.postservice-pagination-text {
    color: #d7d1e7;
    font-size: 13px;
}

@media only screen and (max-width: 700px) {
    .postservice-panel {
        padding: 10px;
    }

    .postservice-panel-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .postservice-mail-top-row {
        flex-direction: column;
        gap: 6px;
    }

    .postservice-mail-time {
        font-size: 11px;
    }

    .postservice-modal {
        width: 100%;
        max-height: 92vh;
    }

    .postservice-preview-summary {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .postservice-preview-copy {
        align-items: center;
    }

    .postservice-category-sections {
        max-height: 180px;
    }

    .postservice-attachment-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }

    .postservice-form-actions,
    .postservice-attachment-actions,
    .postservice-read-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .postservice-form-actions .YellowButton,
    .postservice-form-actions .PurpleButton,
    .postservice-attachment-actions .YellowButton,
    .postservice-attachment-actions .PurpleButton,
    .postservice-read-header-row .PurpleButton,
    .postservice-read-header-row .RedButton {
        width: 100%;
    }
}
.popup.offline-hunt-summary-popup {
    max-width: min(92vw, 980px);
    min-width: min(92vw, 980px);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.offline-hunt-journal-frame {
    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;
}

.offline-hunt-journal-contents {
    margin: -25px;
}

.offline-hunt-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.offline-hunt-header h1 {
    margin: 0 0 6px 0;
    position: relative;
    top: -30px;
    text-align: center;

    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;
}

.offline-hunt-header p {
    margin: 0;
    font-size: 13px;
    color: #e4d9f5;
}

.offline-hunt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.offline-hunt-stat {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(123, 45, 147, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
}

.offline-hunt-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #c7b6db;
    letter-spacing: 0.6px;
}

.offline-hunt-stat-value {
    font-size: 22px;
    font-weight: bold;
    color: #f3eaff;
}

.offline-hunt-stat-success {
    border-color: rgba(126, 255, 186, 0.4);
}

.offline-hunt-stat-fail {
    border-color: rgba(255, 140, 140, 0.4);
}

.offline-hunt-stat-note {
    font-size: 12px;
    color: #c7b6db;
}

.offline-hunt-specials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.offline-hunt-special-panel {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(123, 45, 147, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
}

.offline-hunt-special-panel h3 {
    margin: 0 0 8px 0;
}

.offline-hunt-special-value {
    font-size: 12px;
    color: #f3eaff;
    margin-bottom: 6px;
}

.offline-hunt-carousel {
    display: flex;
    align-items: center;
    gap: 10px;
}

.offline-hunt-carousel-button {
    width: 40px;
    height: 40px;
    border-radius: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.offline-hunt-carousel-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.offline-hunt-carousel-button:not(:disabled):hover {
    transform: translateY(-1px);
}

.offline-hunt-carousel-icon {
    width: 32px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

.offline-hunt-carousel-icon-prev {
    background-image: url(/8abaa9a44b903d5463a2.png);
}

.offline-hunt-carousel-icon-next {
    background-image: url(/448af6421d9d0d4bbc8d.png);
}

.offline-hunt-carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px;
    scroll-snap-type: x mandatory;
    width: 100%;
}

.offline-hunt-summary .enemyImageBackground {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.offline-hunt-summary .enemyImageBackground_crystal {
    background-image:
        linear-gradient(180deg, rgba(6, 36, 48, 0.12), rgba(6, 36, 48, 0.36)),
        url(/4c306b3f3abfc250e07e.jpeg);
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, contain;
    background-color: #0a2833;
}

.offline-hunt-ghost-card {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
    scroll-snap-align: center;
}

.offline-hunt-mission-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(25, 15, 45, 0.9);
    border: 1px solid rgba(255, 220, 130, 0.8);
    color: #ffe7a6;
    padding: 2px 6px;
    font-size: 9px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 8px;
}

.offline-hunt-ghost-image {
    width: 115px;
    height: 115px;
    object-fit: contain;
}

.offline-hunt-ghost-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.75));
    font-size: 11px;
}

.offline-hunt-ghost-name {
    color: #f3eaff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95px;
}

.offline-hunt-ghost-count {
    color: #c7b6db;
    font-weight: bold;
}

.offline-hunt-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.offline-hunt-reward-panel {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(123, 45, 147, 0.4);
    border-radius: 12px;
    padding: 12px;
}

.offline-hunt-reward-panel h3 {
    margin: 0 0 10px 0;
}

.offline-hunt-reward-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.offline-hunt-reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(123, 45, 147, 0.3);
    border-radius: 10px;
    padding: 6px 8px;
    min-width: 140px;
}

.offline-hunt-reward-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.offline-hunt-reward-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
}

.offline-hunt-reward-text {
    display: flex;
    flex-direction: column;
    font-size: 11px;
}

.offline-hunt-reward-amount {
    font-weight: bold;
    color: #f3eaff;
}

.offline-hunt-reward-label {
    color: #c7b6db;
    text-transform: uppercase;
    font-size: 10px;
}

.offline-hunt-empty {
    font-size: 12px;
    color: #c7b6db;
    padding: 6px 0;
}

@media (max-width: 720px) {
    .popup.offline-hunt-summary-popup {
        padding: 0;
    }

    .offline-hunt-summary .enemyImageBackground {
        width: 130px;
        height: 130px;
    }

    .offline-hunt-ghost-image {
        width: 100px;
        height: 100px;
    }

    .offline-hunt-carousel-button {
        width: 34px;
        height: 34px;
    }

    .offline-hunt-carousel-icon {
        width: 26px;
        height: 26px;
    }

    .offline-hunt-header h2 {
        top: -55px;
    }
}

.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: auto;
    /* 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-payment-section {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(13, 18, 30, 0.45);
}

.admin-payment-section-title {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
}

.admin-payment-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.admin-payment-summary-card {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.admin-payment-summary-label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-payment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-payment-card {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.admin-payment-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.admin-payment-meta {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.admin-payment-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.admin-payment-badge {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
}

.admin-payment-badge.is-success {
    background: rgba(43, 194, 126, 0.22);
    color: #9df0c6;
}

.admin-payment-badge.is-pending {
    background: rgba(222, 171, 51, 0.22);
    color: #ffd982;
}

.admin-payment-badge.is-danger {
    background: rgba(217, 79, 79, 0.25);
    color: #ffadad;
}

.admin-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
    font-size: 13px;
}

.admin-payment-grid span,
.admin-payment-note span {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.admin-payment-note {
    margin-top: 10px;
    font-size: 13px;
}

.admin-payment-empty {
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.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;
}

/* 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;
}

.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%;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 20px 0;
    color: #aaa;
    font-style: italic;
}

/* .grid-container .gridItem :hover {
    display: flex;
    background-color: red;
} */

.admin_missions_enemyPreview {
    width: 80px;
    height: 80px;
}

.missionsListItem {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.missionsListRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.missionsListName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.missionsListMeta {
    font-size: 12px;
    opacity: 0.8;
}

.missionsVisibilityBadge {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid transparent;
}

.missionsVisibilityBadge.is-visible {
    color: #9bf7b5;
    border-color: rgba(80, 200, 120, 0.9);
}

.missionsVisibilityBadge.is-hidden {
    color: #ffb3b3;
    border-color: rgba(255, 90, 90, 0.9);
}

/* Batch Selection Styles */
.admin_batch_toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin_batch_select {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin_batch_checkbox_label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}

.admin_batch_checkbox_label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.admin_batch_count {
    font-size: 12px;
    opacity: 0.8;
    color: #9bf7b5;
}

.admin_batch_actions {
    display: flex;
    gap: 8px;
}

.admin_batch_btn {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin_batch_btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin_batch_btn_active {
    background-color: rgba(80, 200, 120, 0.3);
    color: #9bf7b5;
    border-color: rgba(80, 200, 120, 0.5);
}

.admin_batch_btn_active:hover:not(:disabled) {
    background-color: rgba(80, 200, 120, 0.5);
}

.admin_batch_btn_inactive {
    background-color: rgba(255, 90, 90, 0.3);
    color: #ffb3b3;
    border-color: rgba(255, 90, 90, 0.5);
}

.admin_batch_btn_inactive:hover:not(:disabled) {
    background-color: rgba(255, 90, 90, 0.5);
}

.admin_batch_message {
    font-size: 12px;
    padding: 4px 8px;
    background-color: rgba(153, 0, 255, 0.3);
    border-radius: 4px;
    color: #e0c7ff;
}

/* Updated list item styles for checkbox */
.missionsListItem {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.missionsListItem.is-selected {
    background-color: rgba(153, 0, 255, 0.2);
}

.missionsListCheckbox {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.missionsListContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.maxstat-admin-page {
    color: #1f2933;
    padding: 16px;
    width: 100%;
}

.maxstat-admin-page *,
.maxstat-admin-page *::before,
.maxstat-admin-page *::after {
    box-sizing: border-box;
}

.admin-maxstats-header {
    align-items: center;
    background: #f5f7fb;
    border: 1px solid #d8dee9;
    border-radius: 6px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 16px;
}

.admin-maxstats-header h2,
.maxstat-section-heading h3,
.maxstat-section-heading h4,
.maxstat-simulator-results h3 {
    color: #17202a;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    text-shadow: none;
    text-transform: none;
}

.admin-maxstats-header p,
.maxstat-section-heading p,
.field-help,
.maxstat-admin-page small {
    color: #4f5f70;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 4px 0 0;
    text-shadow: none;
    text-transform: none;
}

.field-help {
    display: block;
    font-size: 12px;
    font-weight: 500;
}

.maxstat-admin-page {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.admin-maxstats-header h2 {
    font-size: 22px;
}

.maxstat-section-heading h3,
.maxstat-simulator-results h3 {
    font-size: 18px;
}

.maxstat-section-heading h4 {
    font-size: 16px;
}

.maxstat-info-banner {
    background: #e7f5fb;
    border: 1px solid #b9ddec;
    border-radius: 4px;
    color: #153e4d;
    line-height: 1.45;
    margin-bottom: 12px;
    padding: 12px;
}

.maxstat-tabs {
    background: #ffffff;
    border: 1px solid #d8dee9;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px;
}

.maxstat-tabs button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #334155;
    cursor: pointer;
    font-weight: 700;
    min-height: 34px;
    padding: 7px 12px;
}

.maxstat-tabs button.active {
    background: #1f5fbf;
    border-color: #1f5fbf;
    color: #ffffff;
}

.maxstat-tabs button:not(.active):hover {
    background: #eef4ff;
    border-color: #bfdbfe;
}

.maxstat-tab-panel {
    display: grid;
    gap: 12px;
}

.maxstat-card {
    background: #ffffff;
    border: 1px solid #d8dee9;
    border-radius: 6px;
    color: #1f2933;
    padding: 14px;
}

.maxstat-card-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.maxstat-summary-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
}

.maxstat-summary-card {
    background: #ffffff;
    border: 1px solid #d8dee9;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 76px;
    padding: 12px;
}

.maxstat-summary-card span {
    color: #536273;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.maxstat-summary-card strong {
    color: #17202a;
    font-size: 24px;
    line-height: 1;
}

.maxstat-admin-page label {
    color: #25313d;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
}

.maxstat-checkbox-field {
    align-items: flex-start;
    flex-direction: row !important;
    gap: 8px !important;
}

.maxstat-checkbox-field input,
.profile-enabled-field input {
    flex: 0 0 auto;
    margin-top: 3px;
    min-height: auto !important;
    width: auto !important;
}

.maxstat-checkbox-field span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.maxstat-admin-page input,
.maxstat-admin-page select,
.maxstat-admin-page textarea {
    background: #ffffff;
    border: 1px solid #aeb9c6;
    border-radius: 4px;
    color: #17202a;
    font-size: 14px;
    min-height: 34px;
    padding: 7px 9px;
}

.maxstat-admin-page input:focus,
.maxstat-admin-page select:focus,
.maxstat-admin-page textarea:focus {
    border-color: #2563eb;
    outline: 2px solid rgba(37, 99, 235, 0.18);
}

.maxstat-admin-page input:disabled {
    background: #edf1f5;
    color: #6b7785;
}

.maxstat-admin-page textarea {
    min-height: 110px;
    resize: vertical;
    width: min(680px, 100%);
}

.maxstat-primary-button,
.maxstat-secondary-button,
.maxstat-danger-button,
.maxstat-mini-button,
.maxstat-row-toggle {
    border: 0;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
    min-height: 34px;
    padding: 8px 12px;
}

.maxstat-primary-button {
    background: #2563eb;
}

.maxstat-secondary-button,
.maxstat-mini-button {
    background: #3f5368;
}

.maxstat-danger-button {
    background: #b42318;
}

.maxstat-row-toggle {
    background: #2f6f5f;
    margin-right: 8px;
}

.maxstat-primary-button:disabled,
.maxstat-secondary-button:disabled,
.maxstat-danger-button:disabled,
.maxstat-mini-button:disabled,
.maxstat-row-toggle:disabled {
    background: #aeb9c6;
    cursor: not-allowed;
}

.maxstat-mini-button {
    padding-inline: 10px;
}

.maxstat-actions,
.settings-actions,
.stat-scaling-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.loading,
.error,
.no-data,
.maxstat-status {
    border-radius: 4px;
    margin-bottom: 12px;
    padding: 12px;
}

.loading,
.maxstat-status {
    background: #eef6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
}

.no-data {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #475569;
}

.no-data.compact {
    margin: 4px 0 0;
    padding: 9px;
}

.maxstat-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
}

.maxstat-table {
    background: #ffffff;
    border-collapse: collapse;
    color: #1f2933;
    width: 100%;
}

.maxstat-config-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 0;
    table-layout: fixed;
}

.maxstat-config-table-wrap {
    overflow-x: visible;
}

.maxstat-table.maxstat-config-table th,
.maxstat-table.maxstat-config-table td {
    overflow-wrap: anywhere;
    padding: 7px 6px;
}

.maxstat-config-table thead th {
    background: #eaf0f7;
    box-shadow: 0 1px 0 #cbd5e1, 0 3px 8px rgba(15, 23, 42, 0.08);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 4;
}

.maxstat-config-table th:nth-child(1),
.maxstat-config-table td:nth-child(1) {
    width: 22%;
}

.maxstat-config-table th:nth-child(2),
.maxstat-config-table td:nth-child(2) {
    width: 10%;
}

.maxstat-config-table th:nth-child(3),
.maxstat-config-table td:nth-child(3) {
    width: 9%;
}

.maxstat-config-table th:nth-child(4),
.maxstat-config-table td:nth-child(4) {
    width: 21%;
}

.maxstat-config-table th:nth-child(5),
.maxstat-config-table td:nth-child(5) {
    width: 15%;
}

.maxstat-config-table th:nth-child(6),
.maxstat-config-table td:nth-child(6) {
    width: 13%;
}

.maxstat-config-table th:nth-child(7),
.maxstat-config-table td:nth-child(7) {
    width: 10%;
}

.maxstat-config-table .maxstat-mini-button,
.maxstat-config-table .maxstat-row-toggle {
    line-height: 1.15;
    padding-inline: 7px;
    white-space: normal;
}

.maxstat-config-table .maxstat-mini-button {
    min-width: 0;
    width: 100%;
}

.maxstat-stat-cell {
    min-width: 0;
}

.maxstat-stat-cell-content {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
}

.maxstat-stat-text {
    min-width: 70px;
}

.maxstat-stat-text strong,
.maxstat-stat-text small {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.maxstat-stat-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.maxstat-usage-key {
    background: #e8edf4;
    border-radius: 4px;
    color: #405166;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 3px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 2px 5px;
}

.maxstat-value-stack {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.maxstat-value-line {
    align-items: baseline;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(46px, auto) minmax(0, 1fr);
}

.maxstat-value-line span {
    color: #536273;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
}

.maxstat-value-line strong {
    color: #17202a;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.maxstat-table th,
.maxstat-table td {
    border-bottom: 1px solid #dde4ee;
    padding: 9px;
    text-align: left;
    vertical-align: middle;
}

.maxstat-table th {
    background: #eaf0f7;
    color: #17202a;
    font-size: 12px;
    font-weight: 800;
}

.maxstat-table td strong,
.maxstat-table td small {
    display: block;
}

.maxstat-row:hover td {
    background: #f7faff;
}

.maxstat-expanded-cell {
    background: #f8fafc;
    padding: 12px !important;
}

.maxstat-expanded-content {
    display: grid;
    gap: 12px;
}

.maxstat-detail-grid,
.stat-scaling-config,
.settings-grid,
.maxstat-filter-bar,
.maxstat-simulator,
.maxstat-result-grid {
    display: grid;
    gap: 12px;
}

.maxstat-detail-grid {
    background: #eef4f8;
    border: 1px solid #d4dde6;
    border-radius: 4px;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    padding: 10px;
}

.maxstat-detail-item {
    align-content: start;
    background: #ffffff;
    border: 1px solid #d8dee9;
    border-radius: 4px;
    display: grid;
    gap: 5px;
    min-height: 66px;
    padding: 9px 10px;
}

.maxstat-detail-item span {
    color: #536273;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.maxstat-detail-item strong {
    color: #17202a;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.maxstat-warning-text {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 4px;
    color: #9a3412;
    grid-column: 1 / -1;
    padding: 9px;
}

.maxstat-filter-bar {
    align-items: end;
    grid-template-columns: 2fr repeat(3, minmax(150px, 1fr));
}

.maxstat-add-usage {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
}

.maxstat-add-usage .maxstat-section-heading {
    grid-column: 1 / -1;
}

.stat-scaling-global {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.maxstat-section-heading,
.global-exclude-rules-field,
.stat-scaling-notes {
    grid-column: 1 / -1;
}

.maxstat-example-panel {
    align-self: stretch;
    background: #f1f5f9;
    border: 1px solid #d8dee9;
    border-radius: 4px;
    color: #25313d;
    display: grid;
    gap: 4px;
    padding: 10px;
}

.maxstat-range-field {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(120px, 1fr) 82px;
}

.maxstat-range-field input[type="range"] {
    padding: 0;
}

.maxstat-mode-badge,
.maxstat-status-badge,
.maxstat-delta {
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
    white-space: nowrap;
}

.maxstat-mode-badge {
    align-items: center;
    flex-direction: column;
    gap: 1px;
    justify-content: center;
    line-height: 1.05;
    min-width: 68px;
    text-align: center;
    white-space: normal;
}

.maxstat-mode-setting {
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    margin: 1px 0 0;
    opacity: 0.86;
}

.maxstat-mode-badge.mode-0 {
    background: #e5e7eb;
    color: #374151;
}

.maxstat-mode-badge.mode-1 {
    background: #fee2e2;
    color: #991b1b;
}

.maxstat-mode-badge.mode-2 {
    background: #dbeafe;
    color: #1d4ed8;
}

.maxstat-mode-badge.mode-3 {
    background: #fef3c7;
    color: #92400e;
}

.maxstat-mode-badge.mode-4 {
    background: #d1fae5;
    color: #065f46;
}

.maxstat-status-badge.status-active {
    background: #dcfce7;
    color: #166534;
}

.maxstat-status-badge.status-disabled {
    background: #f3f4f6;
    color: #4b5563;
}

.maxstat-status-badge.status-inactive {
    background: #ffedd5;
    color: #9a3412;
}

.maxstat-delta {
    align-items: center;
    flex-direction: column;
    gap: 1px;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
}

.maxstat-delta.drift {
    background: #fff7ed;
    color: #9a3412;
}

.maxstat-delta.stable {
    background: #ecfdf3;
    color: #166534;
}

.stat-scaling-panel,
.maxstat-settings,
.maxstat-contribution-metadata {
    margin: 0;
}

.stat-scaling-panel {
    display: grid;
    gap: 14px;
}

.stat-scaling-panel .maxstat-section-heading {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
    text-align: left;
}

.stat-scaling-panel .maxstat-section-heading h4,
.stat-scaling-panel .maxstat-section-heading p {
    margin-left: 0;
    margin-right: 0;
}

.stat-scaling-snapshot {
    background: #edf3f9;
    border: 1px solid #d8e1ea;
    border-radius: 6px;
    color: #334155;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    padding: 12px;
}

.stat-scaling-metric {
    align-content: start;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 6px;
    display: grid;
    gap: 4px;
    min-height: 64px;
    padding: 10px 12px;
}

.stat-scaling-metric span {
    color: #526173;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.stat-scaling-metric strong {
    color: #17202a;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.stat-scaling-config {
    align-items: start;
    background: #fbfdff;
    border: 1px solid #e0e7ef;
    border-radius: 6px;
    grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1fr);
    margin-bottom: 0;
    padding: 14px;
}

.stat-scaling-config > label {
    align-self: stretch;
    margin: 0;
}

.stat-scaling-config .maxstat-checkbox-field {
    align-items: flex-start;
    background: #f4f7fb;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    gap: 10px;
    min-height: 78px;
    padding: 12px;
}

.stat-scaling-config .maxstat-checkbox-field input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.stat-scaling-config .maxstat-checkbox-field small {
    max-width: 260px;
}

.stat-scaling-config select,
.stat-scaling-config input[type="text"],
.stat-scaling-config input[type="number"] {
    max-width: 100%;
    width: 100%;
}

.stat-scaling-config .maxstat-range-field {
    max-width: 420px;
}

.settings-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    margin-bottom: 12px;
}

.stat-scaling-config .settings-actions {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 2px;
    padding-top: 12px;
}

.stat-scaling-actions {
    align-items: stretch;
    background: #f8fafc;
    border: 1px solid #e0e7ef;
    border-radius: 6px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
}

.stat-scaling-action-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stat-scaling-action-group.secondary {
    justify-content: flex-end;
}

.settings-success {
    color: #166534;
    font-size: 13px;
    font-weight: 700;
}

.settings-error {
    color: #b42318;
    font-size: 13px;
    font-weight: 700;
}

.balance-profiles {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.stat-scaling-profile-section {
    grid-column: 1 / -1;
}

.balance-profiles-header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.balance-profiles-header small {
    display: block;
    margin-top: 2px;
}

.balance-profile-editor {
    align-items: end;
    background: #eaf4ff;
    border: 1px solid #bbdefb;
    border-radius: 4px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1.1fr 0.8fr 0.8fr 1.6fr auto;
    padding: 10px;
}

.profile-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.profile-enabled-field {
    align-items: center;
    flex-direction: row !important;
    gap: 6px !important;
    min-height: 34px;
}

.maxstat-contribution-metadata,
.maxstat-contribution-section,
.contributions-list {
    display: grid;
    gap: 8px;
}

.contribution-item {
    align-items: center;
    background: #f1f8f4;
    border-left: 4px solid #15803d;
    border-radius: 4px;
    color: #1f2933;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
    padding: 8px 10px;
}

.contribution-item.collection {
    border-left-color: #2563eb;
}

.contribution-item.ignored {
    background: #fff1f2;
    border-left-color: #e11d48;
}

.contribution-header,
.contribution-details {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.slot-count {
    background: #2563eb;
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
}

.item-name {
    color: #25313d;
}

.item-value {
    color: #166534;
    font-weight: 800;
}

.contribution-item.ignored .item-value {
    color: #b42318;
}

.maxstat-simulator {
    align-items: end;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.maxstat-simulator-mode {
    align-self: stretch;
    background: #f1f5f9;
    border: 1px solid #d8dee9;
    border-radius: 4px;
    color: #25313d;
    display: grid;
    gap: 6px;
    padding: 10px;
}

.maxstat-simulator-current-values {
    align-self: stretch;
    background: #f8fafc;
    border: 1px solid #d8dee9;
    border-radius: 4px;
    color: #25313d;
    display: grid;
    gap: 4px;
    padding: 10px;
}

.maxstat-simulator-current-values span,
.maxstat-simulator-results p {
    color: #53657a;
    font-size: 0.9rem;
}

.maxstat-simulator-results {
    display: grid;
    gap: 12px;
}

.maxstat-result-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

@media (max-width: 1100px) {
    .maxstat-summary-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .maxstat-detail-grid,
    .stat-scaling-snapshot {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 900px) {
    .admin-maxstats-header,
    .maxstat-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .stat-scaling-global,
    .stat-scaling-config,
    .stat-scaling-actions,
    .settings-grid,
    .maxstat-add-usage,
    .maxstat-filter-bar,
    .maxstat-simulator,
    .maxstat-result-grid,
    .balance-profile-editor {
        grid-template-columns: 1fr;
    }

    .balance-profiles-header,
    .profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .maxstat-summary-grid,
    .maxstat-detail-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .stat-scaling-notes {
        grid-column: auto;
    }

    .stat-scaling-action-group.secondary {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .maxstat-summary-grid,
    .maxstat-detail-grid,
    .stat-scaling-snapshot {
        grid-template-columns: 1fr;
    }

    .maxstat-range-field {
        grid-template-columns: 1fr;
    }
}

.newsletterList {
    max-width: 240px;
}

.newsletterAdminPage {
    position: relative;
}

.newsletterListMessage {
    padding: 12px;
    color: white;
}

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

.newsletterListItemSelected {
    outline: 2px solid rgba(255, 255, 255, 0.35);
}

.newsletterListItemTitle {
    font-weight: 700;
    color: white;
}

.newsletterListItemMeta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.newsletterListItemMetaError {
    color: #ffb3b3;
}

.newsletterDetail {
    gap: 16px;
    color: white;
}

.newsletterDetail input:not([type="checkbox"]),
.newsletterDetail select,
.newsletterDetail textarea {
    background-color: rgba(10, 10, 18, 0.92);
    border: 1px solid rgba(139, 95, 191, 0.65);
    color: #F6F7FF;
    border-radius: 4px;
}

.newsletterDetail input:not([type="checkbox"])::placeholder,
.newsletterDetail textarea::placeholder {
    color: rgba(246, 247, 255, 0.55);
}

.newsletterDetail input[type="datetime-local"] {
    color-scheme: dark;
}

.newsletterDetail input[type="datetime-local"]::-webkit-date-and-time-value,
.newsletterDetail input[type="datetime-local"]::-webkit-datetime-edit,
.newsletterDetail input[type="datetime-local"]::-webkit-datetime-edit-text,
.newsletterDetail input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.newsletterDetail input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.newsletterDetail input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.newsletterDetail input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.newsletterDetail input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
    color: #F6F7FF;
}

.newsletterDetail input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2);
    cursor: pointer;
}

.newsletterDetailHeader {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.newsletterDetailHeader h2 {
    margin: 0 0 8px 0;
}

.newsletterDetailMeta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    text-align: right;
}

.newsletterEstimateDetails {
    margin-top: 4px;
}

.newsletterStatusExplanation {
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid rgba(139, 95, 191, 0.4);
    background-color: rgba(10, 10, 18, 0.65);
    color: rgba(246, 247, 255, 0.92);
    line-height: 1.45;
}

.newsletterEstimateDetails summary {
    cursor: pointer;
    color: rgba(246, 247, 255, 0.92);
}

.newsletterEstimateDetailsBody {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(139, 95, 191, 0.4);
    border-radius: 4px;
    background-color: rgba(10, 10, 18, 0.65);
}

.newsletterRecipientList {
    max-height: 200px;
    margin: 0 0 8px 0;
    padding-left: 18px;
    overflow: auto;
}

.newsletterRecipientListEmpty {
    margin-bottom: 8px;
    color: rgba(246, 247, 255, 0.75);
}

.newsletterStatusBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.newsletterStatusBadgedraft {
    background-color: rgba(100, 149, 237, 0.35);
}

.newsletterStatusBadgescheduled {
    background-color: rgba(255, 165, 0, 0.35);
}

.newsletterStatusBadgeprocessing {
    background-color: rgba(138, 43, 226, 0.35);
}

.newsletterStatusBadgecompleted {
    background-color: rgba(46, 204, 113, 0.35);
}

.newsletterStatusBadgecanceled {
    background-color: rgba(231, 76, 60, 0.35);
}

.newsletterAlert {
    padding: 10px 12px;
    border-radius: 4px;
}

.newsletterAlertError {
    background-color: rgba(231, 76, 60, 0.22);
    border: 1px solid rgba(231, 76, 60, 0.45);
}

.newsletterAlertSuccess {
    background-color: rgba(46, 204, 113, 0.18);
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.newsletterRoleGroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletterSectionLabel {
    font-size: 14px;
    font-weight: 700;
}

.newsletterCheckboxGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.newsletterInlineCheckbox {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}

.newsletterInlineCheckbox input {
    margin: 0;
}

.newsletterFilterRow {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.newsletterFilterRow label {
    flex: 1;
    min-width: 180px;
}

.newsletterTextarea {
    min-height: 120px;
    resize: vertical;
}

.newsletterTextareaTall {
    min-height: 220px;
}

.newsletterPreviewBlock {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletterPreviewFrame {
    min-height: 220px;
    padding: 16px;
    background-color: rgba(255, 255, 255, 0.96);
    color: #111;
    border-radius: 4px;
    overflow: auto;
}

.newsletterActionRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.newsletterActionRow button {
    padding: 8px 12px;
}

.newsletterToastViewport {
    position: fixed;
    top: 22px;
    right: 20px;
    z-index: 10001;
    max-width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}

.newsletterToast {
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background-color: rgba(16, 18, 28, 0.94);
    color: #F6F7FF;
    font-weight: 600;
    line-height: 1.4;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.newsletterToastSuccess {
    border-color: rgba(46, 204, 113, 0.55);
    background: linear-gradient(135deg, rgba(18, 66, 42, 0.96), rgba(13, 21, 24, 0.96));
}

.newsletterToastError {
    border-color: rgba(231, 76, 60, 0.58);
    background: linear-gradient(135deg, rgba(91, 29, 27, 0.97), rgba(23, 14, 19, 0.96));
}

.newsletterBusyOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 7, 14, 0.74);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.newsletterBusyCard {
    width: min(420px, 100%);
    padding: 28px 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(16, 20, 34, 0.97), rgba(8, 10, 19, 0.97));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    text-align: center;
    color: #F6F7FF;
}

.newsletterBusySpinner {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px auto;
    border-radius: 999px;
    border: 4px solid rgba(246, 247, 255, 0.18);
    border-top-color: #f7be57;
    border-right-color: #c87dff;
    animation: newsletterBusySpin 0.9s linear infinite;
}

.newsletterBusyTitle {
    font-size: 18px;
    font-weight: 700;
}

.newsletterBusyText {
    margin-top: 10px;
    color: rgba(246, 247, 255, 0.78);
    line-height: 1.5;
}

@keyframes newsletterBusySpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .newsletterDetailHeader {
        flex-direction: column;
    }

    .newsletterDetailMeta {
        text-align: left;
    }

    .newsletterToastViewport {
        top: 16px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

.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(/16c2711ac8578c0dfaf8.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: 'Luckiest Guy';
  src: url(/04dea529d3802106e6d7.ttf) format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Londrina Solid';
  src: url(/0d5e1206643fc301cd24.ttf) format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Londrina Solid';
  src: url(/ec88da3c79312b6a2a6f.ttf) format('truetype');
  font-weight: 900;
  font-display: swap;
}

:root {
  --gt-font-display: 'Luckiest Guy', 'Londrina Solid', Impact, sans-serif;
  --gt-font-heading: 'Londrina Solid', 'Luckiest Guy', Impact, sans-serif;
  --gt-font-body: 'Dante', 'Roboto Slab', 'Trebuchet MS', sans-serif;

  --gt-color-stage-950: #040716;
  --gt-color-stage-900: #070b2a;
  --gt-color-stage-800: #10163d;
  --gt-color-panel-700: #24155a;
  --gt-color-panel-600: #32186c;
  --gt-color-panel-inner: #1a0f46;
  --gt-color-frame-metal: #9aa4d9;
  --gt-color-wood-dark: #5e3e2a;
  --gt-color-wood-light: #8c6545;
  --gt-color-accent-cyan: #66e7ff;
  --gt-color-accent-blue: #3fc3ff;
  --gt-color-accent-magenta: #f04cff;
  --gt-color-accent-violet: #b168ff;
  --gt-color-reward-gold: #ffd34d;
  --gt-color-success: #73ff7a;
  --gt-color-danger: #ff4d6d;
  --gt-color-text-primary: #ffffff;
  --gt-color-text-secondary: #d7d9f8;
  --gt-color-text-muted: #a8add6;
  --gt-color-overlay: rgba(8, 9, 27, 0.72);

  --gt-shadow-panel: 0 16px 36px rgba(0, 0, 0, 0.42);
  --gt-shadow-glow-cyan: 0 0 24px rgba(102, 231, 255, 0.35);
  --gt-shadow-glow-magenta: 0 0 22px rgba(240, 76, 255, 0.28);

  --gt-radius-sm: 8px;
  --gt-radius-md: 12px;
  --gt-radius-lg: 18px;

  --gt-space-2xs: 4px;
  --gt-space-xs: 8px;
  --gt-space-sm: 12px;
  --gt-space-md: 16px;
  --gt-space-lg: 24px;
  --gt-space-xl: 32px;

  --gt-stage-max-width: 884px;
  --gt-stage-max-width-wide: 1100px;
  --gt-stage-padding: clamp(12px, 2vw, 24px);

  --gt-breakpoint-phone: 420px;
  --gt-breakpoint-mobile: 700px;
  --gt-breakpoint-tablet: 1024px;

  --gt-image-stage-background: url(/ebf106c91dbf8655b8bd.jpg);

  /* Backward compatibility for existing global CSS. */
  --purple: var(--gt-color-accent-magenta);
}

.gt-ui-stage {
  width: min(100%, var(--gt-stage-max-width));
  margin-inline: auto;
  padding-inline: var(--gt-stage-padding);
  box-sizing: border-box;
}

.gt-ui-stage--wide {
  width: min(100%, var(--gt-stage-max-width-wide));
}

.gt-ui-panel {
  border: 2px solid rgba(154, 164, 217, 0.7);
  border-radius: var(--gt-radius-md);
  background:
    linear-gradient(180deg, rgba(50, 24, 108, 0.96), rgba(26, 15, 70, 0.98));
  color: var(--gt-color-text-primary);
  box-shadow: var(--gt-shadow-panel);
}

.gt-ui-panel__body {
  padding: clamp(14px, 2vw, 24px);
}

.gt-ui-heading {
  margin: 0;
  color: var(--gt-color-accent-cyan);
  font-family: var(--gt-font-heading);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gt-ui-heading--hero {
  font-family: var(--gt-font-display);
}

.gt-ui-copy {
  color: var(--gt-color-text-secondary);
  font-family: var(--gt-font-body);
  line-height: 1.55;
}

.gt-ui-field {
  width: 100%;
  border: 1px solid rgba(102, 231, 255, 0.38);
  border-radius: var(--gt-radius-sm);
  background: rgba(7, 8, 20, 0.92);
  color: var(--gt-color-text-primary);
  box-sizing: border-box;
}

.gt-ui-field:focus {
  outline: none;
  border-color: rgba(102, 231, 255, 0.82);
  box-shadow: 0 0 0 2px rgba(102, 231, 255, 0.18);
}

.gt-ui-button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--gt-radius-sm);
  font-family: var(--gt-font-heading);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.gt-ui-button:hover {
  transform: translateY(-1px);
}

.gt-ui-button:active {
  transform: translateY(0);
}

.gt-ui-button--primary {
  background: linear-gradient(180deg, #4fd7ff, #198ed6);
  color: #08111d;
  box-shadow: var(--gt-shadow-glow-cyan);
}

.gt-ui-button--secondary {
  background: linear-gradient(180deg, #f26cff, #9d3be2);
  color: #ffffff;
  box-shadow: var(--gt-shadow-glow-magenta);
}

.gt-ui-button--ghost {
  border-color: rgba(102, 231, 255, 0.38);
  background: rgba(8, 10, 28, 0.7);
  color: var(--gt-color-accent-cyan);
}

.gt-ui-button[disabled],
.gt-ui-button.is-disabled {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.65;
  box-shadow: none;
}

.gt-ui-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--gt-color-overlay);
}

.gt-ui-modal {
  width: min(calc(100vw - 24px), 640px);
  max-height: min(85vh, 760px);
  overflow: auto;
}

@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;
}

.gtcCookieConsent {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  left: 0;
  padding: 12px 16px;
  position: fixed;
  width: 100%;
  z-index: 999;
  background: rgba(21, 28, 31, 0.96);
  border-top: 1px solid rgba(102, 231, 255, 0.24);
  color: #f5f7f8;
  font-size: 14px;
  line-height: 1.35;
}

.gtcCookieConsentContent {
  flex: 1 1 420px;
  margin: 0;
}

.gtcCookieConsentActions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
}

.gtcCookieConsentButton {
  min-height: 44px;
  min-width: 88px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(102, 231, 255, 0.45);
  border-radius: 6px;
  background: #f5f7f8;
  color: #1b2428;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.gtcCookieConsentDeclineButton {
  background: transparent;
  color: #f5f7f8;
}

.gtcCookieConsentButton:focus-visible {
  outline: 2px solid var(--gt-color-accent-cyan, #66e7ff);
  outline-offset: 2px;
}

@media only screen and (max-width: 480px) {
  .gtcCookieConsent {
    gap: 8px;
    max-height: 32vh;
    overflow-y: auto;
    padding: 8px 10px;
    font-size: 12px;
  }

  .gtcCookieConsentContent {
    flex-basis: 100%;
  }

  .gtcCookieConsentActions {
    width: 100%;
  }

  .gtcCookieConsentButton {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 7px 10px;
    font-size: 14px;
  }
}