/* PLACE YOU CUSTOM STYLES IN THIS FILE */
:root
{
    --rgb_ui_1: 16,14,10;
    --rgb_ui_2: 27,23,21;
    --rgb_ui_3: 40,32,25;
    --rgb_ui_4: 56,51,47;
    --rgb_ui_5: 123,109,90;
    --rgb_ui_6: 251,233,208;
    --rgb_ui_7: 194,115,24;
    --rgb_ui_8: 16,153,27; /* dark green */
    --rgb_ui_9: 184,252,102; /* light green */

    --ui_1: rgb(var(--rgb_ui_1));
    --ui_1_op_50: rgba(var(--rgb_ui_1),0.5);
    --ui_1_op_60: rgba(var(--rgb_ui_1),0.6);
    --ui_1_op_70: rgba(var(--rgb_ui_1),0.7);

    --ui_2: rgb(var(--rgb_ui_2));
    --ui_2_op_40: rgba(var(--rgb_ui_2),0.4);
    --ui_2_op_60: rgba(var(--rgb_ui_2),0.6);

    --ui_3: rgb(var(--rgb_ui_3));
    --ui_3_op_40: rgba(var(--rgb_ui_3),0.5);

    --ui_4: rgb(var(--rgb_ui_4));
    --ui_4_op_40: rgba(var(--rgb_ui_4),0.5);

    --ui_5: rgb(var(--rgb_ui_5));;
    --ui_5_op_40: rgba(var(--rgb_ui_5),0.5);

    --ui_6: rgb(var(--rgb_ui_6));
    --ui_6_op_50: rgba(var(--rgb_ui_6),0.5);

    --ui_7: rgb(var(--rgb_ui_7));
    --ui_7_op_50: rgba(var(--rgb_ui_7),0.5);

    --ui_8: rgb(var(--rgb_ui_8));

    --ui_9: rgb(var(--rgb_ui_9));
    
    --dark: 14, 14, 14;
    --light: #F1F2F3;
    --gold: rgb(243, 178, 0);
    --gold-1: #c27318;
    --gold-2: #e08821;
    --gold-3: #a16117;
    --blue: rgb(20, 38, 119);
    --greyText: #a7a2a2;
    --fsh0: 72pt;
    --fsh1: 2.125rem;
    --fsh2: 1.875rem;
    --fsh3: 1.5rem;
    --fsh4: 1.25rem;
    --fsh5: 1.125rem;
    --fsh6: 1rem;
    --fsh7: 18pt;
    --fsh8: 16pt;
    --fsh9: 14pt;
    --fsh10: 12pt;
    --fsh11: 10pt;
}

.bg-color-black_op-35 {background-color: rgba(0, 0, 0, 0.3);}
.bg-color-black_op-70 {background-color: rgba(0, 0, 0, 0.7);}

.bg-color-ui_1 {background-color: var(--ui_1) !important;}
.bg-color-ui_1_op-50 {background-color: var(--ui_1_op_50) !important;}
.bg-color-ui_1_op-60 {background-color: var(--ui_1_op_60) !important;}
.bg-color-ui_1_op-70 {background-color: var(--ui_1_op_60) !important;}

.bg-color-ui_2 {background-color: var(--ui_2) !important;}
.bg-color-ui_2_op-40 {background-color: var(--ui_2_op_40) !important;}
.bg-color-ui_2_op-60 {background-color: var(--ui_2_op_60) !important;}

.bg-color-ui_3 {background-color: var(--ui_3) !important;}
.bg-color-ui_3_op-40 {background-color: var(--ui_3_op_40) !important;}

.bg-color-ui_4 {background-color: var(--ui_4) !important;}
.bg-color-ui_4_op-40 {background-color: var(--ui_4_op_40) !important;}

.bg-color-ui_5 {background-color: var(--ui_5) !important;}
.bg-color-ui_5_op-40 {background-color: var(--ui_5_op_40) !important;}

.bg-color-ui_6 {background-color: var(--ui_6) !important;}
.bg-color-ui_6_op-40 {background-color: var(--ui_6_op_40) !important;}

.bg-color-ui_7 {background-color: var(--ui_7) !important;}
.bg-color-ui_7_op-40 {background-color: var(--ui_7_op_40) !important;}

.opacity_100 {opacity: 1 !important;}

.pointable {cursor: pointer !important;}

.col-md-4[data-href]:hover {
  box-shadow: 0px 4px 15px rgba(255, 165, 0, 0.6); /* Adjust color and size as needed */
  transform: translateY(-5px); /* Optional: adds a slight lift on hover */
}

.center-item{
    margin-right: auto !important;
    margin-left: auto !important;
}

.v-align-m {vertical-align: middle !important;}

.center-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Set a height to center vertically */
}

.width-90px {width: 90px !important;}

.addGap-2r{gap: 1rem !important;}

.spaces-between {justify-content: space-between !important;}

.w-mxContent { width: max-content !important;}

.height-auto {height: auto !important;}

.h-auto { height: auto;}
.w-5{ width: 5% !important ;}
.w-10{ width: 10% !important ;}
.w-15{ width: 15% !important ;}
.w-20{ width: 20% !important ;}
.w-29{ width: 29% !important ;}
.w-30{ width: 30% !important ;}
.w-40{ width: 40% !important ;}
.w-49{ width: 49% !important ;}
.w-50{ width: 50% !important ;}
.w-60{ width: 60% !important ;}
.w-65{ width: 65% !important ;}
.w-70{ width: 70% !important ;}
.w-75{ width: 75% !important ;}
.w-80{ width: 80% !important ;}
.w-85{ width: 85% !important ;}
.w-90{ width: 90% !important ;}
.w-95{ width: 95% !important ;}
.w-100{ width: 100% !important ;}

.maxW-5{ max-width: 5% !important ;}
.maxW-10{ max-width: 10% !important ;}
.maxW-15{ max-width: 15% !important ;}
.maxW-20{ max-width: 20% !important ;}
.maxW-29{ max-width: 29% !important ;}
.maxW-30{ max-width: 30% !important ;}
.maxW-40{ max-width: 40% !important ;}
.maxW-49{ max-width: 49% !important ;}
.maxW-50{ max-width: 50% !important ;}
.maxW-60{ max-width: 60% !important ;}
.maxW-65{ max-width: 65% !important ;}
.maxW-70{ max-width: 70% !important ;}
.maxW-75{ max-width: 75% !important ;}
.maxW-80{ max-width: 80% !important ;}
.maxW-85{ max-width: 85% !important ;}
.maxW-90{ max-width: 90% !important ;}
.maxW-95{ max-width: 95% !important ;}
.maxW-100{ max-width: 100% !important ;}

.mt-1{ margin-top: 1% !important ;}
.mt-2{ margin-top: 2% !important ;}
.mt-3{ margin-top: 3% !important ;}
.mt-4{ margin-top: 4% !important ;}
.mt-5{ margin-top: 5% !important ;}
.mt-6{ margin-top: 6% !important ;}
.mt-7{ margin-top: 7% !important ;}
.mt-8{ margin-top: 8% !important ;}
.mt-9{ margin-top: 9% !important ;}
.mt-10{ margin-top: 10% !important ;}

.mt-075r{ margin-top: 0.75rem !important ;}
.mt-1r{ margin-top: 1rem !important ;}
.mt-2r{ margin-top: 2rem !important ;}
.mt-3r{ margin-top: 3rem !important ;}
.mt-4r{ margin-top: 4rem !important ;}
.mt-5r{ margin-top: 5rem !important ;}
.mt-6r{ margin-top: 6rem !important ;}
.mt-7r{ margin-top: 7rem !important ;}
.mt-8r{ margin-top: 8rem !important ;}
.mt-9r{ margin-top: 9rem !important ;}
.mt-10r{ margin-top: 10rem !important ;}

.mr-1r{ margin-right: 1rem !important ;}
.mr-2r{ margin-right: 2rem !important ;}
.mr-3r{ margin-right: 3rem !important ;}
.mr-4r{ margin-right: 4rem !important ;}
.mr-5r{ margin-right: 5rem !important ;}
.mr-6r{ margin-right: 6rem !important ;}
.mr-7r{ margin-right: 7rem !important ;}
.mr-8r{ margin-right: 8rem !important ;}
.mr-9r{ margin-right: 9rem !important ;}
.mr-10r{ margin-right: 10rem !important ;}

.ml-1{ margin-left: 1% !important ;}
.ml-2{ margin-left: 2% !important ;}
.ml-3{ margin-left: 3% !important ;}
.ml-4{ margin-left: 4% !important ;}
.ml-5{ margin-left: 5% !important ;}
.ml-6{ margin-left: 6% !important ;}
.ml-7{ margin-left: 7% !important ;}
.ml-8{ margin-left: 8% !important ;}
.ml-9{ margin-left: 9% !important ;}
.ml-10{ margin-left: 10% !important ;}
.ml-25{ margin-left: 25% !important ;}

.ml-1r{ margin-left: 1rem !important ;}
.ml-2r{ margin-left: 2rem !important ;}
.ml-3r{ margin-left: 3rem !important ;}
.ml-4r{ margin-left: 4rem !important ;}
.ml-5r{ margin-left: 5rem !important ;}
.ml-6r{ margin-left: 6rem !important ;}
.ml-7r{ margin-left: 7rem !important ;}
.ml-8r{ margin-left: 8rem !important ;}
.ml-9r{ margin-left: 9rem !important ;}
.ml-10r{ margin-left: 10rem !important ;}
.ml-25r{ margin-left: 25rem !important ;}

.mr-5{ margin-right: 5% !important ;}

.mb-1{ margin-bottom: 1% !important ;}
.mb-2{ margin-bottom: 2% !important ;}
.mb-3{ margin-bottom: 3% !important ;}
.mb-4{ margin-bottom: 4% !important ;}
.mb-5{ margin-bottom: 5% !important ;}

.mb-0r{ margin-bottom: 0rem !important ;}
.mb-075r{ margin-bottom: 0.75rem !important ;}
.mb-1r{ margin-bottom: 1rem !important ;}
.mb-2r{ margin-bottom: 2rem !important ;}
.mb-3r{ margin-bottom: 3rem !important ;}
.mb-4r{ margin-bottom: 4rem !important ;}
.mb-5r{ margin-bottom: 5rem !important ;}
.mb-6r{ margin-bottom: 6rem !important ;}
.mb-7r{ margin-bottom: 7rem !important ;}
.mb-8r{ margin-bottom: 8rem !important ;}
.mb-9r{ margin-bottom: 9rem !important ;}
.mb-10r{ margin-bottom: 10rem !important ;}

.p-1 {padding: 0.25rem !important; }
.p-2 {padding: 0.5rem !important; }
.p-3 {padding: 1rem !important; }
.p-4 {padding: 1.5rem !important; }
.p-5 {padding: 3rem !important; }
.p-6 {padding: 3.5rem !important; }
.p-7 {padding: 4rem !important; }
.p-8 {padding: 4.5rem !important; }
.p-9 {padding: 5rem !important; }

.p-1r {padding: 1rem !important; }
.p-2r {padding: 2rem !important; }
.p-3r {padding: 3rem !important; }
.p-4r {padding: 4rem !important; }
.p-5r {padding: 5rem !important; }
.p-6r {padding: 6rem !important; }
.p-7r {padding: 7rem !important; }
.p-8r {padding: 8rem !important; }
.p-9r {padding: 9rem !important; }

.pt-1r{ padding-top: 1rem !important;}
.pt-2r{ padding-top: 2rem !important;}
.pt-3r{ padding-top: 3rem !important;}
.pt-4r{ padding-top: 4rem !important;}
.pt-5r{ padding-top: 5rem !important;}
.pt-10r{ padding-top: 10rem !important;}

.pb-1r{ padding-bottom: 1rem !important;}
.pb-2r{ padding-bottom: 2rem !important;}
.pb-3r{ padding-bottom: 3rem !important;}
.pb-4r{ padding-bottom: 4rem !important;}
.pb-5r{ padding-bottom: 5rem !important;}

.pr-0r{ padding-right: 0rem !important;}
.pr-1r{ padding-right: 1rem !important;}
.pr-2r{ padding-right: 2rem !important;}
.pr-3r{ padding-right: 3rem !important;}
.pr-4r{ padding-right: 4rem !important;}
.pr-5r{ padding-right: 5rem !important;}

.pl-0r{ padding-left: 0rem !important;}
.pl-1r{ padding-left: 1rem !important;}
.pl-2r{ padding-left: 2rem !important;}
.pl-3r{ padding-left: 3rem !important;}
.pl-4r{ padding-left: 4rem !important;}
.pl-5r{ padding-left: 5rem !important;}

.pl-5{ padding-left: 5% !important;}
.pr-5{ padding-right: 5% !important;}
.pb-5{ padding-bottom: 5% !important;}
.pt-5{ padding-top: 5% !important;}

.pr-10{ padding-right: 10% !important;}
.pl-10{ padding-left: 10% !important;}
.pt-10{ padding-top: 10% !important;}
.pb-10{ padding-bottom: 10% !important;}

.text-decoration-none { text-decoration: none !important;}
.text-decoration-underline { text-decoration: underline !important;}
.text-align-left { text-align: left !important;}
.text-align-right { text-align: right !important;}
.text-align-justify { text-align: justify !important;}
.text-align-center { text-align: center !important;}

.text-black {color: black;}
.text-white {color: white;}
.text-gold-1 {color: var(--gold-1) !important;}
.text-gold-2 {color: var(--gold-2) !important;}
.text-ui_1 {color: var(--ui_1) !important;}
.text-ui_2 {color: var(--ui_2) !important;}
.text-ui_3 {color: var(--ui_3) !important;}
.text-ui_4 {color: var(--ui_4) !important;}
.text-ui_5 {color: var(--ui_5) !important;}
.text-ui_6 {color: var(--ui_6) !important;}
.text-ui_7 {color: var(--ui_7) !important;}

.text-shadow-black {text-shadow: 4px 4px 10px rgb(0, 0, 0);}

.font-f-marcellus {font-family: "Marcellus SC", serif;}

.fs-h1 {font-size: var(--fsh1) !important;}
.fs-h2 {font-size: var(--fsh2) !important;}
.fs-h3 {font-size: var(--fsh3) !important;}
.fs-h4 {font-size: var(--fsh4) !important;}
.fs-h5 {font-size: var(--fsh5) !important;}
.fs-h6 {font-size: var(--fsh6) !important;}
.fs-h7 {font-size: var(--fsh7) !important;}
.fs-h8 {font-size: var(--fsh8) !important;}
.fs-h9 {font-size: var(--fsh9) !important;}
.fs-h10 {font-size: var(--fsh10) !important;}

.hr-c1 {border-top: 1px solid var(--ui_1) !important;}
.hr-c2 {border-top: 1px solid var(--ui_2) !important;}
.hr-c3 {border-top: 1px solid var(--ui_3) !important;}
.hr-c4 {border-top: 1px solid var(--ui_4) !important;}
.hr-c5 {border-top: 1px solid var(--ui_5) !important;}
.hr-c6 {border-top: 1px solid var(--ui_6) !important;}
.hr-c7 {border-top: 1px solid var(--ui_7) !important;}

.index-0 {z-index: 100 !important;}

.bg-video-opacity-0 {opacity: 0 !important;}

.bg-dark-1-op65 {
    background: rgba(var(--dark),1)  !important;
}

.network-img-glow
{
    box-shadow: 0px 0px 8px #c3deeb;
    border-radius: 50%;
}

.roadMap-boxShadow-green
{
  box-shadow: 0px 4px 8px #b8fc66 !important; /* 10991b b8fc66 6bfc66*/
}

.col-md-4[data-href]:hover {
  box-shadow: 0px 0px 54px rgba(var(--rgb_ui_6), 0.8); /* Adjust color and size as needed */
  transform: translateY(-6px); /* Optional: adds a slight lift on hover */
}

/** mobile version **/
@media only screen and (max-width: 768px)
{
  .fixed-custom-button
  {
    position: absolute !important;
    top: 15rem;
    left: 0;
    right: 0;
  }
  
  .home-logotype
  {
    display: block;
    margin-top: 2rem;
    margin-bottom: 10rem;
    width: 85%;
  }

  .mt-footer {margin-top: 10rem;}

  .addGap_5percent {gap: 5% !important;}

  .maxWidth_30percent
  {
    margin-top: 2rem !important;
  }

  .btn-steamWishlist{ width: 85%;}

  #networkIcons {display: block;}    
  .nk-nav.closed #networkIcons {display: none !important;}
}

/** tablet version **/
@media only screen and (max-width: 991px) and (min-width: 769px)
{
  .fixed-custom-button
  {
    position: absolute !important;
    top: 15rem;
    left: 0;
    right: 0;
  }

  .home-logotype
  {
    display: block;
    margin-top: 24rem;
    margin-bottom: 1rem;
    width: 80%;
  }

  .mt-footer {margin-top: 15rem;}

  .addGap_5percent {gap: 5% !important;}
  .maxWidth_30percent
  {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }

  .btn-steamWishlist{ width: 50%;}

  #networkIcons {display: block;}    
  .nk-nav.closed #networkIcons {display: none !important;}
}

/** tablet version **/
@media only screen and (max-width: 1365px) and (min-width: 992px)
{
  .fixed-custom-button
  {
    position: absolute !important;
    top: 15rem;
    left: 0;
    right: 0;
  }
  .home-logotype
  {
    display: block;
    margin-top: 22rem;
    margin-bottom: 1rem;
    width: 85%;
  }
  .mt-footer {margin-top: 15rem;}

  .addGap_5percent {gap: 5% !important;}
  .maxWidth_30percent
  {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }

  .btn-steamWishlist{ width: 40%;}

  #networkIcons {display: none;}    
  .nk-nav.closed #networkIcons {display: none !important;}
}

/** desktop version **/
@media only screen and (min-width: 1366px)
{
  .fixed-custom-button
  {
    position: absolute !important;
    top: 15rem;
    left: 0;
    right: 0;
  }

  .home-logotype
  {
    display: block;
    margin-top: 22rem;
    margin-bottom: 1rem;
    width: 80%;
  }

  .mt-footer {margin-top: 15rem;}
  .display-network-icons-mobile-tablet { display: none !important;}

  .addGap_5percent {gap: 5% !important;}

  .maxWidth_30percent
  {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }

  .btn-steamWishlist{ width: 35%;}

  #networkIcons {display: none;}    
  .nk-nav.closed #networkIcons {display: none !important;}
}


.custom-button {
  display: inline-block;
  padding: 10px 20px;
  background-image: url('../images/buttons/Web_Button_Normal.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ui_6) !important;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border: none;
  outline: none;
  overflow: hidden;
  position: relative;
}
.custom-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/buttons/Web_Button_Hover.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.custom-button:hover
{
  color: var(--ui_5) !important;
}
.custom-button:hover::before {
  opacity: 1;
}
.custom-button:active {
  background-image: url('../images/buttons/Web_Button_Pressed.png') !important;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  color: var(--ui_6) !important;
}
.custom-button:active::before {
  opacity: 0; /* Hide the hover image when the button is clicked */
}

.custom-button-text {
  position: relative;
  z-index: 2;
  padding: 4rem 4rem;
}

.button-submit
{
  background-color: var(--ui_7);
  display: inline-block;
  font-weight: 400;
  color: var(--ui_6);
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.button-submit {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2rem 1rem;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button-style_1 {
  color: var(--ui_7); 
  border: 2px solid var(--ui_7);
}

.button-style_1:hover {
  background-color: var(--ui_7);
  color: var(--ui_2);
}


/* DEPLOY BOX */

.info-container {
  position: relative;
}

.toggle-arrow {
  background: none;
  border: none;
  font-size: 24px;
  color: #fbe9d0;
  cursor: pointer;
  transition: transform 0.3s ease; /* Rotate animation */
}

.info-box 
{
  display: none; /* Hidden by default */
  margin-top: 10px;
}
.devlog-img
{
  box-shadow: 0px 8px 16px rgb(var(--rgb_ui_1));
  display: block;
  margin: 0 auto;
  width: 60% !important;
  align-self: center;
}

.deploy-box
{
  background-color: var(--ui_4_op_40) !important;
  box-shadow: 0px 8px 8px rgb(var(--rgb_ui_4));
  margin-right: auto !important;
  margin-left: auto !important;
  margin-bottom: 3rem;
  width: 80% !important;
  padding: 1rem;
}

.info-toggle-button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
}

.info-toggle-button h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* END DEPLOY BOX */

.img-bg-setup-01::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-color: rgb(var(--rgb_ui_5));
  opacity: 0.05; /* Set the opacity level here (0.1 to 1) */
  z-index: 1000/* Stacks the background overlay behind content */
}

/* Ensure the content is above the background overlay */
.img-bg-setup-01 .container {
  position: relative;
  z-index: 1001;
}

.roadMap-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/images/bg/bg_emptyMap.webp'); /* Specify the path to your image */
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-color: rgb(var(--rgb_ui_5));
  opacity: 0.05; /* Set the opacity level here (0.1 to 1) */
  z-index: 1000/* Stacks the background overlay behind content */
}

/* Ensure the content is above the background overlay */
.roadMap-bg .container {
  position: relative;
  z-index: 1001;
}

.gallery-img
{
  box-shadow: 0px 2px 16px rgb(var(--rgb_ui_5));
  margin: 0 auto;
  align-self: center;
}

.gallery-video {
  width: 45% !important;
  box-shadow: 0px 2px 16px rgb(var(--rgb_ui_5));
}

/* First Adventurers Leaderboard START */

.leaderboard-scroll 
{
    max-height: 500px; /* Adjust height here */
    overflow-y: auto;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0;
    margin: 0;
}

.leaderboard-table
{
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    margin-top: 0 !important;
    font-size: 1rem;
    background: var(--ui_1);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

/* Optional: make header sticky inside scroll */
.leaderboard-table thead th 
{
    margin: 0;
    padding: 12px 16px; /* adjust as needed */
    position: sticky;
    top: 0;
    background: var(--ui_4_op_40);
    z-index: 2;
}

.leaderboard-table thead {background-color: var(--ui_4_op_40);}

.leaderboard-table th
{
  padding: 0.5rem 1rem;
  text-align: center;
  font-family: "Marcellus SC", serif;
}

.leaderboard-table td 
{
    padding: 0.5rem 1rem;
    text-align: center;
}

.leaderboard-table tbody tr:nth-child(even) {background-color: var(--ui_2);}

.leaderboard-table tbody tr:hover 
{
    background-color: var(--ui_4);
    transition: background 0.3s ease;
}

.tier-icon 
{
    width: 24px;
    height: 24px;
    margin-left: 0 !important;
    object-fit: contain;
}

@media screen and (max-width: 600px) 
{
    .leaderboard-table th, .leaderboard-table td 
    {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
}
/* First Adventurers Leaderboard END */

/* Thumbnail styling */
.popup-thumb
{
  cursor: pointer;
  transition: transform 0.2s;
}

.popup-thumb:hover {transform: scale(1.05);}

/* Overlay background */
.popup-overlay
{
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  justify-content: center;
  align-items: center;
}

/* Scaled image inside the popup */
.popup-image
{
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px #000;
  border-radius: 8px;
}