@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=Sora:wght@100..800&display=swap');

@font-face {
  font-family: 'Microgramma D Extended';
  src: url('../fonts/microgramma-d-extended-medium.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Microgramma D Extended';
  src: url('../fonts/microgramma-d-extended-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

:root{
  --aged-rose-color: #A0756A;
  --black-color: #11110F;
  --blush-veil-color: #E7C5B2;
  --brown-color: #614123;
  --coral-color: #ED6D4C;
	--cream-color: #FFFFEC;
  --glass-dark-mode-color: rgba(214, 255, 65, 0.14);
  --dark-green-color: #6A8349;;
  --forest-color: #465130;
  --grey-color: #5A5A5A;
  --khaki-color: #B89A4B;
	--lime-color: #D6FF41;
  --light-brown-color: #BE9066;
  --light-forest-color: #AAB486;
  --light-grey-color: #CECECE;
  --light-lime-color: #E8FCA0;
  --light-orange-color: #FFA755;
  --sunglow-color: #FFCA3A;
  --mute-lime-color: #F4F4C8;
  --neon-orange-color: #FF7B00;
  --pale-pink-color: #F8876A;
  --glass-dark-mode: rgba(214, 255, 65, 0.14);
  --dot: #999EA1;
  --dot-active: var(--lime-color);
  --gap: 18px;
  --w: 220px;          /* card width (desktop) */
  --h: 280px;          /* card height (desktop) */
}
html{ overflow-x: hidden; min-height: 100vh; }
body{
  padding-bottom: 105px;
  position: relative;
  overflow-x: hidden; overflow-y: auto;
  min-height: 100vh; 
	background: var(--black-color);
	font-family: Sora, Arial, Helvetica, sans-serif; font-size: 12px;

  &.prod-pg{
    &::before{
      content: ' ';
      position: absolute; z-index: -2;
      top: 15rem; left: -25%; right: -25%; margin: 0 auto;
      width: 150%;
      height: 50%;
      border-radius: 50%;
      background: linear-gradient(0deg, rgba(163, 185, 77, 0.10) 0%, rgba(215, 228, 165, 0.20) 100%);
      filter: blur(50px);
    }

    &::after{
      content: ' ';
      position: fixed;  z-index: -2;
      bottom: -10rem; left: calc(calc(100% - 30rem)/2);  margin: 0 auto;
      width: 30rem;
      height: 25rem;
      border-radius: 50%;
      background: linear-gradient(0deg, rgba(163, 185, 77, 0.10) 0%, rgba(73, 83, 35, 0.20) 100%);
      filter: blur(50px);
    }
  }
}
main{
  position: relative;
  z-index: 10;
}
/*--- GENERAL ---*/
.coral-color{ color: var(--coral-color) !important; }
.cream-color{ color: var(--cream-color) !important; }
.light-forest-color{ color: var(--light-forest-color) !important; }
.light-grey-color{ color: var(--light-grey-color) !important; }
.light-lime-color{ color: var(--light-lime-color) !important; }
.pale-pink-color{ color: var(--pale-pink-color) !important; }
.border-forest-color{ border-color: var(--forest-color) !important; }
.font-microgramma{ font-family: 'Microgramma D Extended', sans-serif; font-weight: 700; }
.fw-500{ font-weight:500; }
.fs-1rem{ font-size: 1rem !important; }
.rounded-more{ border-radius: 14px !important; }
.btn-theme, .btn-theme2{
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 40px;
  border-width: 1px;
  border-style: solid;
}
.btn-theme{
  border-color: var(--lime-color);
  background: linear-gradient(180deg, rgba(196, 230, 67, 0.20) 0%, rgba(255, 255, 255, 0.20) 129.17%);
  color: var(--lime-color);
}
.btn-theme2{
  border-color: rgba(255,255,255,0.2);
  background: linear-gradient(180deg, rgba(196, 230, 67, 0.20) 0%, rgba(255, 255, 255, 0.20) 129.17%);
  color: var(--cream-color);
}
.btn-theme2.btn-xs{
  padding: .25rem .75rem !important;
  font-size: 0.8rem;
}
.btn-success2{ background-color: rgba(214,255,65,.46); }
.badge{
  border-radius: 12px; border-width: 0.3px; border-style: solid;
  font-weight: normal; 
}
.text-success{ color: var(--light-lime-color) !important; }
.text-danger{ color: var(--coral-color) !important; }
.link{ color: var(--dark-green-color) !important; text-decoration: none;}

.progress {
  background-color: #d1dcc1;
  border-radius: 5px;
  position: relative;
  height: 5px;

  .progress-bar {  border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
}

.nav-pills[role="tablist"]{
  justify-content: space-between !important;

  .nav-link{ 
    color: #6a6a6a; 
    position: relative;

    &:focus,&:hover{ color: var(--cream-color); }
    &.active{
      color: var(--cream-color);
      background-color: transparent;
    }

    .show{
      &.nav-link{
        color: var(--cream-color);
        background-color: transparent;
      }
    }
  }  

  &:not(.nav-pills2) .nav-link.active::after, &:not(.nav-pills2) .show>.nav-link::after{
    content: ' ';
    position: absolute; bottom: -2px; left: 0;
    width: 100%;
    height: 2px;
    background: var(--lime-color);
  }

  &.nav-pills2 .nav-link{
    &.active{
      border: 1px solid var(--lime-color);
      background: rgba(141, 170, 31, 0.58);
    }
  }
}


.modal-backdrop.show{
  backdrop-filter: blur(3px);
  background-color: rgba(0, 0, 0, 0.5); /* Optional: Adjust background color and opacity */
  opacity: 1 !important; /* Optional: Ensure full opacity for the backdrop */
}
.modal-img{
  color: var(--lime-color);
  .modal-dialog-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;

    big{ font-size:30px; }
  }

  .modal-title{
    font-family: 'Microgramma D Extended', sans-serif;
    font-size:24px; font-weight: 700;
    text-transform: uppercase;
  }
}
.modal-try-your-luck-content{
  background: url('../img/modal/try-your-luck-1.5x.png') center center no-repeat;
  background-size: 100%;
}
.modal-upset-duck-content{
  background: url('../img/modal/upset-duck-1.5x.png') center center no-repeat;
  background-size: 100%;
}
.modal-lucky-you-content{
  position: relative;
  width: 100%; max-width: 400px;
  padding: 10%;
  aspect-ratio: 1/1;
  font-family: 'Microgramma D Extended', sans-serif;
  font-size:24px; font-weight: 700;
  text-transform: uppercase;
  color: #000;

  &::before{
    content: url('../img/modal/modal-luckyyou-left-img.png');
    position: absolute;
    left: 0;
    top: 0;
  }
  &::after{
    content: url('../img/modal/modal-luckyyou-right-img.png');
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .modal-lucky-you-content-inner{
    width: 100%; height: 100%;
    border-radius: 21.22px;
    border: 1.485px solid #72F575;
    background: linear-gradient(180deg, rgba(212, 224, 100, 0.20) 14.43%, rgba(244, 253, 244, 0.20) 112.21%), rgba(208, 255, 147, 0.20);
    box-shadow: -6.162px 6.162px 6.162px 0 rgba(255, 255, 255, 0.21) inset;
    display: flex;
    justify-content: center;
    align-items: center;

    &::before{
      content: url('../img/modal/modal-luckyyou-left-img-xs.png');
      position: absolute;
      left: 5%;
      bottom: 20%;
    }
    &::after{
      content: url('../img/modal/modal-luckyyou-right-img-xs.png');
      position: absolute;
      right: 5%;
      top: 20%;
    }

    .modal-lucky-you-spark{
      position: relative;
      z-index: 1;

      &::before{
        content: url('../img/modal/modal-luckyyou-spark.png');     
        position: absolute;
        right: -15%;
        top: -50%;
        z-index: -1;
      }

    }
  }
}

.modal-quest-content{
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.modal-congratulation-content{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-congratulation-img{
  position: relative;
  border-radius: 268px;
  opacity: 0.64;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 10, 10, 0.07) 69.23%, rgba(241, 145, 58, 0.33) 95.67%, rgba(197, 151, 245, 0.38) 100%);
  box-shadow: 0 0 20px 0 rgba(197, 151, 245, 0.69);
  backdrop-filter: blur(5px);
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%; max-width: 400px;

  &::before{
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 124px; height: 124px;
    fill: rgba(151, 245, 193, 0.52);
    opacity: 0.64;
    filter: drop-shadow(0 0 20px rgba(197, 151, 245, 0.69)) blur(38.25px);
    backdrop-filter: blur(5px);
  }

  span{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    &::before{
      content: url('../img/modal/modal-win-left-img-xs.png');
      position: absolute;
      left: 0;
      bottom: 20%;
    }

    &::after{
      content: url('../img/modal/modal-win-right-img-xs.png');
      position: absolute;
      right: 0;
      top: 20%;
    }
  }
}
#congratulationModal{
  .nav-pills.nav-footer {
    padding: 0;

    &::before {
      background: transparent;
    }
  }
}
.modal-backdrop{
  background-color: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(10px) !important;
}
.content-error{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;

  .modal-header{ border-bottom:none; color: var(--neon-orange-color); }
  .modal-body{
    border-radius: 21.22px;
    border: 1.485px solid rgb(255, 119, 0);
    background: rgba(255, 119, 0, 0.20);
    box-shadow: -6.162px 6.162px 6.162px 0 rgba(255, 255, 255, 0.21) inset;
    color: white;
    width: 100%;
  }
  .modal-footer{ border-top: none; }
} 

.btn-modal{
  padding: .75rem 1.5rem;
  border-radius: 47.599px;
  border: 1px solid var(--lime-color);
  background: linear-gradient(180deg, rgba(196, 230, 67, 0.20) 0%, rgba(255, 255, 255, 0.20) 129.17%);
  color: var(--lime-color);
}

.slide-in-blurred-top {
  -webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
          animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

/**
 * ----------------------------------------
 * animation slide-in-blurred-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

/*--- HEADER ---*/
body:not(.no-header-bg){
  &::before{
  	content: ' ';
  	position: absolute; z-index: -1; top: 0;
  	width: 100%; height: 185px;
  	background: linear-gradient(180deg, var(--lime-color) 0%, rgba(214, 255, 65, 0.00) 100%);
  }

  &.light-gradient::before{ top: -40px; }
  &.light-gradient2::before{ top: -100px; }
}
.btn-white{
	border-radius: 1rem;
	background: #E5F4C7;
	color: var(--black-color) !important;
}

/*--- MAIN ---*/
.block-title{
  margin: 0 27px;
  font-family: 'Microgramma D Extended', sans-serif;
  font-size:18px; font-weight: 700; line-height: 18px;
  background: var(--Lime-Linear, linear-gradient(180deg, #F3FFC7 0%, var(--lime-color, #D6FF41) 100%));
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.load-in-effect{
  font-size: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: load-in-animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes load-in-animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
.block-caption{  color: var(--light-grey-color); }

.dashboard-hotprizes{ position: relative; }
.dashboard-hotprizes::before{
  content: ''; /*url('../img/dashboard-hotprizes-bg-2x.png')*/
  display: inline;
  position: absolute; z-index: -1; top:-3.5rem; right: 0;
  width: 100%;
  height: 100%;
  background: url('../img/dashboard-hotprizes-bg-1.5x.png') no-repeat top right;
}

.dashboard-minigames{ position: relative; }
.dashboard-minigames::before{
  content: '';
  display: inline;
  position: absolute; z-index: -2; top:-3.5rem; right: 0;
  width: 100%;
  height: 100%;
  background: url('../img/dashboard-minigames-bg1-1.5x.png') no-repeat top center;
}
.dashboard-minigames::after{
  content: '';
  display: inline;
  position: absolute; z-index: -1; top:0; right: 0;
  width: 100%;
  height: 100%;
  background: url('../img/dashboard-minigames-bg2-1.5x.png') no-repeat top center;
  background-size: contain;
}

.dashboard-prizes{ position: relative; }
.dashboard-prizes::before{
  content: '';
  display: inline;
  position: absolute; z-index: -2; top:-3.5rem; right: 0;
  width: 100%;
  height: 100%;
  background: url('../img/dashboard-prizes-bg1-1.5x.png') no-repeat top center;
}
.dashboard-prizes::after{
  content: '';
  display: inline;
  position: absolute; z-index: -1; top:0; right: -80px;
  width: calc(100% + 80px);
  height: 100%;
  background: url('../img/dashboard-newprizes-bg2-1.5x.png') no-repeat top right;
  background-size: 125%;
}

.minigames-title-block{ position: relative; }
.minigames-title-block::before{
  content: '';
  display: inline;
  position: absolute; z-index: -2; top:0; right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/minigames-bg-1.5x.png) no-repeat top right;
  background-size: 66.67%;
}

/*--- DASHBOARD - Banner ---*/
.banner{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;

  img{
    width: auto;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
  }
}


/*--- DASHBOARD - Hot Prizes ---*/
/* Center */
.coverflow .pos-0 {
  transform: translate(-50%, -50%) translateX(0) rotateY(0deg) scale(1);
  opacity: 1;
  z-index: 6;
  pointer-events: auto;
  filter: none;
}

/* Left / Right */
.coverflow .pos--1 {
  transform: translate(-50%, -50%)
             translateX(calc(-1 * (var(--w) * 0.65 + var(--gap))))
             rotateY(18deg)
             scale(.92);
  opacity: .95;
  z-index: 5;
}

.coverflow .pos-1 {
  transform: translate(-50%, -50%)
             translateX(calc(var(--w) * 0.65 + var(--gap)))
             rotateY(-18deg)
             scale(.92);
  opacity: .95;
  z-index: 5;
}

/* base card */
.coverflow .cf-item-inner {
  display: flex;
  width: 170px;
  padding: 5px 5px 13px 5px;
  flex-direction: column;
  align-items: center;

  border-radius: 14px;
  border: solid 1px rgba(214, 255, 65, 0.4);
  background: var(--glass-dark-mode);

  transform-origin: center center;
  transition: transform .3s ease;
}

/* LEFT card skew (left side angles inward) */
.coverflow .pos--1 .cf-item-inner {
  transform: skewY(-4deg);
}

/* RIGHT card skew (right side angles inward) */
.coverflow .pos-1 .cf-item-inner {
  transform: skewY(4deg);
}


/* center card – straight */
.coverflow .pos-0 .cf-item-inner {
  transform: rotateZ(0deg);
  /*border: solid 1px rgba(214, 255, 65, 0.4);*/
  box-shadow: 0 0 20px 0 rgba(214, 255, 65, 0.20);
  scale: 0.92;
  margin-top: -8%;
}

/*'--- carousel ---*/
.carousel-indicators [data-bs-target] {
  width: 8px !important; height: 8px !important; border-radius: 50%;
  border-top: unset; border-bottom: unset;
  opacity: 1;

  img{
    width: auto; max-width: 100%;
    height: 66.7%;
    object-fit: contain;
  }
}
.carousel-indicators .active{background: #9BF852;}

/*--- coverflow carousel ---*/
.coverflow{
  position: relative;
  height: var(--h);
  display: grid;
  place-items: center;
  perspective: 1200px;
  user-select: none;
  overflow: visible; /* we want the side items to peek out */

  /* track holds all items; we translate items individually, not the track */
  .cf-track{
    position: relative;
    width: 100%;
    height: 100%;
  }

  .cf-item{
    position: absolute;
    top: 50%;
    left: 50%;
    /*width: var(--w);
    height: var(--h);*/
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease, filter .35s ease, z-index .0s linear .15s;
    will-change: transform, opacity, filter, z-index;
    cursor: pointer;
  }

  .card{
    width: 100%; height: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(186,255,111,.35);
    background: radial-gradient(120% 100% at 50% 0%, #223017 0%, #171c14 70%);
    box-shadow: 0 12px 34px rgba(186,255,111,.28), inset 0 0 0 1px rgba(186,255,111,.15);
    display: grid;
    grid-template-rows: 1fr auto;
  }
  .card img{ width:100%; height:100%; object-fit: cover; display:block; border-bottom:1px solid rgba(255,255,255,.08); }
  .meta{ padding:10px 12px; font-size:14px; line-height:1.15; }
  .title{ font-weight:700; }
  .sub{ opacity:.85; font-size:12px; }

  /* Base (far items) */
  .cf-item{ opacity:.0; pointer-events: none; filter: blur(0px); z-index: 0; border-radius: 14px;}

  /* Center */
  .pos-0{ 
    transform: translate(-50%, -50%) translateX(0) rotateY(0deg) scale(1);
    opacity:1; z-index: 6; pointer-events: auto; filter: none;
  }

  /* Left / Right tiers (desktop shows ±2; mobile shows ±1) */
  .pos--1{
    transform: translate(-50%, -50%) translateX(calc(-1 * (var(--w) * 0.82 + var(--gap)))) rotateY(18deg) scale(.92);
    opacity:.95; z-index:5;
  }
  .pos-1{
    transform: translate(-50%, -50%) translateX(calc(var(--w) * 0.82 + var(--gap))) rotateY(-18deg) scale(.92);
    opacity:.95; z-index:5;
  }
  .pos--2{
    transform: translate(-50%, -50%) translateX(calc(-1 * (var(--w) * 1.25 + var(--gap)*2))) rotateY(28deg) scale(.84);
    opacity:.8; z-index:4; filter: brightness(.9);
  }
  .pos-2{
    transform: translate(-50%, -50%) translateX(calc(var(--w) * 1.25 + var(--gap)*2)) rotateY(-28deg) scale(.84);
    opacity:.8; z-index:4; filter: brightness(.9);
  }

  /* Controls */
  .ctrl{
    position:absolute; top:50%; transform: translateY(-50%);
    width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.35); color:#fff;
    display:grid; place-items:center; cursor:pointer;
    transition: background .2s ease, border-color .2s ease;
  }
  .ctrl:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
  .prev{ left:-6px; }
  .next{ right:-6px; }
  .ctrl svg{ width:20px; height:20px; }
}

@media screen and (max-width: 400px) {
  .coverflow .pos--1{
    transform: translate(-50%, -50%) translateX(calc(-1 * (var(--w) * 0.92 + var(--gap)))) rotateY(18deg) scale(.92) !important;
  }
  .coverflow .pos-1{
    transform: translate(-50%, -50%) translateX(calc(var(--w) * 0.92 + var(--gap))) rotateY(-18deg) scale(.92) !important;
  }
  
}

/* Indicators */
.coverflow-indicators{ 
  margin-top:16px; 
  display:flex; justify-content:center;
  gap:6px;

  button{
    width:6px; height:6px; 
    border-radius:50%; border:none; 
    background: var(--light-grey-color);
    cursor:pointer; padding:0;
    transition: transform .2s ease, background .2s ease;

    &.active{ background:#baff6f; /*transform: scale(1.2);*/ }
  }
}

.cf-item-img{
  display: flex; justify-content: center; align-items: center;
  width: 160px; height: 160px;
  overflow:hidden;
  border-radius: 10px;
  background: #000;

  img{
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

.cf-item-title{
  color: var(--light-grey-color);

  a{ color: var(--light-grey-color); text-decoration: none;}
}

.cf-item-caption{
  color: var(--light-lime-color);
  font-size: .6rem; /*font-weight: 300; line-height: 8px;*/
}

/*--- DASHBOARD - Categories ---*/
.dashboard-categories-list{
  .dashboard-categories-item{
    .dashboard-categories-item-inner{
      margin-bottom: .75rem; padding: .75rem;
      min-height: 160px;
      color: white; font-size: 1rem;
      position: relative;
      border-radius: 8px; backdrop-filter: blur(10px); /* Frosted glass effect */
      /*
      border: 1px solid transparent;
      border-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .7), rgba(255, 255, 255, .4), rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), rgba(255, 255, 255, .4), rgba(255, 255, 255, .7), rgba(255, 255, 255, 1)) 1;
      */
      display: flex; justify-content: start; align-items: end;
      overflow: hidden;

      &::before{
        position: absolute; z-index: -1; bottom: -3rem; left: -3rem;
        transform: scale(1);
      }

      &::after{
        position:absolute; z-index: 1; top:2.5rem; right:2.5rem;
        transform: scale(2);
      }
    }

    &.tech .dashboard-categories-item-inner{
      background: linear-gradient(180deg, rgba(243, 242, 65, 0.50) 0.09%, rgba(127, 126, 8, 0.50) 91.57%);
      box-shadow: 0 0 10px 0 rgba(212, 210, 69, 0.30);

      &::before{  content: url('../img/bg-cat-tech-1.5x.png'); }
      &::after{  content: url('../img/ico-cat-tech.svg'); }
    }   

    &.fashion .dashboard-categories-item-inner{  
      background: linear-gradient(180deg, rgba(205, 252, 96, 0.50) 0.09%, rgba(64, 119, 116, 0.50) 91.57%);
      box-shadow: 0 0 10px 0 rgba(205, 252, 96, 0.30);

      &::before{  content: url('../img/bg-cat-fashion-1.5x.png'); }
      &::after{  content: url('../img/ico-cat-fashion.svg'); }
    }
    &.hobby .dashboard-categories-item-inner{ 
      background: linear-gradient(180deg, rgba(255, 217, 239, 0.50) 0.09%, rgba(209, 60, 42, 0.50) 91.57%);
      box-shadow: 0 0 10px 0 rgba(255, 217, 239, 0.30);

      &::before{  content: url('../img/bg-cat-hobby-1.5x.png'); }
      &::after{  content: url('../img/ico-cat-hobby.svg'); }
    }
    &.accessories .dashboard-categories-item-inner{  
      background: linear-gradient(180deg, rgba(254, 140, 65, 0.50) 0.09%, rgba(201, 59, 24, 0.50) 91.57%);
      box-shadow: 0 0 10px 0 rgba(254, 140, 65, 0.30);

      &::before{  content: url('../img/bg-cat-accessories-1.5x.png'); }
      &::after{  content: url('../img/ico-cat-accessories.svg'); }
    }
    &.selfcare .dashboard-categories-item-inner{  
      background: linear-gradient(180deg, rgba(120, 224, 244, 0.50) 0.09%, rgba(14, 113, 209, 0.50) 91.57%);
      box-shadow: 0 0 10px 0 rgba(120, 224, 244, 0.30);

      &::before{  content: url('../img/bg-cat-selfcare-1.5x.png'); }
      &::after{  content: url('../img/ico-cat-selfcare.svg'); }
    }
    &.sports .dashboard-categories-item-inner{  
      background: linear-gradient(180deg, rgba(191, 142, 255, 0.50) 0.09%, rgba(90, 23, 175, 0.50) 91.57%);
      box-shadow: 0 0 10px 0 rgba(191, 142, 255, 0.30);

      &::before{  content: url('../img/bg-cat-sports-1.5x.png'); }
      &::after{  content: url('../img/ico-cat-sports.svg'); }
    }   
  }  
}

/*--- PRODUCT LIST ---*/
.prod-item{
    padding: 5px 5px 11px 5px;
    display: flex; flex-direction: column; align-items: center; align-self: stretch;
    border-radius: 14px;

    &.green {
      background: rgba(214, 255, 65, 0.14);

      .prod-item-stock{
        background: var(--forest-color);
        color: var(--cream-color);
        text-align: center;
      }

      .prod-item-status .badge{
        border-color: var(--lime-color);
        background: var(--forest-color) !important;
        color: var(--lime-color);
      }

      .prod-item-percent{ 
        color: var(--light-lime-color); 

        .progress-bar{ background: linear-gradient(90deg, var(--lime-color) 0%, #EFFFD9 120.7%); }
      }
    }
    &.red   {
      background: rgba(255, 119, 0, 0.20);
      /*box-shadow: 0 0 20px 0 rgba(255, 119, 0, 0.20);*/

      .prod-item-stock{
        background: var(--brown-color);
        color: var(--cream-color);
      }

      .prod-item-status .badge{
        border-color: var(--neon-orange-color);
        background: var(--brown-color) !important;
        color: var(--neon-orange-color);
      }

      .prod-item-percent{ 
        color: var(--light-orange-color); 

        .progress-bar{ background: linear-gradient(90deg, #F1841F 42.94%, #FFD9B5 120.7%); }
      }
    }
    &.light-green {
      background: rgba(144, 204, 188, 0.28);

      .prod-item-stock{
        background: var(--forest-color);
        color: var(--cream-color);
        text-align: center;
      }

      .prod-item-status .badge{
        border-color: var(--lime-color);
        background: var(--forest-color) !important;
        color: var(--lime-color);
      }

      .prod-item-percent{ 
        color: var(--light-lime-color); 

        .progress-bar{ background: linear-gradient(90deg, var(--lime-color) 0%, #EFFFD9 120.7%); }
      }
    }
    &.orange   {
      background: rgba(255, 170, 83, 0.28);

      .prod-item-stock{
        background: var(--brown-color);
        color: var(--cream-color);
      }

      .prod-item-status .badge{
        border-color: var(--neon-orange-color);
        background: var(--brown-color) !important;
        color: var(--neon-orange-color);
      }

      .prod-item-percent{ 
        color: var(--light-orange-color); 

        .progress-bar{ background: linear-gradient(90deg, #F1841F 42.94%, #FFD9B5 120.7%); }
      }
    }

    .prod-item-inner{
      .prod-item-stock{
        padding: 4px 10px;
        /*height: 18px;*/
        display: flex; justify-content: center; align-items: center; align-self: stretch; gap: 2px;
        border-radius: 10px;
        font-family: "Microgramma D Extended", sans-serif; font-size: .8rem; font-weight: 700;
        text-transform: capitalize;
      }
      .prod-item-img{
        display: flex; justify-content: center; align-items: center;
        overflow:hidden;
        border-radius: 10px;
        background: #000;

        img{ width: 100%; min-width: 100%; height: 100%; _min-height: 200px; object-fit: cover; }
      }
      .prod-item-title{ 
        font-size: .8rem;
        color: var(--light-grey-color); 

        a{ color: var(--light-grey-color); text-decoration:none; }
      }
      .prod-item-status{
        display: flex; justify-content: center; align-items: center; align-self: stretch;
        gap: 4px;
      }
      .prod-item-percent{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center;
        font-size: .6rem; font-style: normal; font-weight: 500; line-height: 10.456px; /* 130.702% */
      }
    }
  }

/*--- PRODUCT DETAIL ---*/
#carouselProduct{
  position: relative;
  border-radius: 23.437px;
  border: 1px solid rgba(255,255,255,0.2);
  background: var(--Black, #11110F);
  box-shadow: 0 0 46.875px 4.687px rgba(214, 255, 65, 0.20) inset;

  .carousel-item {
    height: 400px; /* Adjust this value to your desired height */
    overflow: hidden; /* Hide any overflowing parts of the image */
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center; /* Center the image within the item */
  }

  .carousel-tickets{
    position: absolute;
    padding: 3px 20px;
    top: 1rem;
    right: 1rem;
    border-radius: 40px;
    background: rgba(255, 119, 0, 0.4);
    box-shadow: 0 0 20px 0 rgba(255, 119, 0, 0.20);
    color: var(--cream-color);
    font-size: .8rem;
  }
}
.prod-item-pg{
  position: relative;
  color: var(--cream-color);
  border: solid 1px rgba(255,255,255,0.2);
  border-radius: 20px;
  background: rgba(214, 255, 65, 0.04);
  box-shadow: 0 0 20px 0 rgba(214, 255, 65, 0.20);

  a{ color: #6a8349 !important; }

  .prod-item{
    padding:0;
    background: transparent !important;

    .prod-item-header-category{
      font-size: .8rem;
      color: var(--cream-color);
    }
    .prod-item-header-title{
      font-family: 'Microgramma D Extended', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--cream-color);
    }
    .prod-item-status .badge{
      border-color: var(--light-forest-color);
      background: rgba(0,0,0,0.1) !important;
      color: var(--light-forest-color);
    }

    .prod-item-ticket{
      border-top: solid 1px var(--forest-color);

      .prod-item-ticket-content{
        padding: .75rem;
        background: rgba(200, 141, 95, 0.2);
        border: solid 1px rgba(255,255,255,0.2);
        border-radius: 10px;
        box-shadow: 0 0 20px 0 rgba(255, 119, 0, 0.20);
      }

      .prod-item-ticket-last-bought{
        border-radius: 10px;
background: linear-gradient(180deg, rgba(214, 255, 65, 0.20) -40.95%, rgba(128, 153, 39, 0.00) 108.82%);
        color: var(--light-lime-color);
      }
    }
  }  

}
.prod-item-btn{
  border: solid 1px rgba(255,255,255,0.1) !important;
  border-radius: 40px !important;
  background: linear-gradient(180deg, rgba(196, 230, 67, 0.20) 0%, rgba(255, 255, 255, 0.20) 129.17%) !important;

  .text-uppercase{
    font-size: 16px;
    color: var(--lime-color);
  }
}
.prod-pg .nav-pills.nav-footer{ 
  padding: 6px; gap: 6px; font-size: 1rem;

  .nav-link {
      font-size: 0.7rem;
  }
}

/*--- GAME ---*/
/*--- PRODUCT LIST ---*/
.game-item{
    padding: 5px;
    display: flex; flex-direction: column; align-items: center; align-self: stretch;
    border-radius: 14px;
    border: solid 1px rgba(255, 255, 255, 0.2);

    &.red{
      background: rgba(241, 109, 203, 0.3);
  
      .game-item-title{
        /*background: linear-gradient(180deg, rgba(241, 109, 203, 0.8) -40.95%, rgba(241, 109, 203, 0.00) 108.82%);*/
        background: linear-gradient(180deg, rgba(129,62,108,1) 20%, rgba(129,62,108,0.3) 108.82%)
      }
    }

    &.purple {
      background: rgba(144, 204, 188, 0.3);

      .game-item-title{
        background: linear-gradient(180deg, rgba(85,116,107,1) 20%, rgba(85,116,107,0.3) 108.82%)
        
      }
    }
    &.yellow   {
      background: rgba(255, 170, 83, 0.3);

      .game-item-title{
        background: linear-gradient(180deg, rgba(255, 170, 83, 0.8) -40.95%, rgba(255, 170, 83, 0.00) 108.82%);
      }
    }
    &.green {
      background: rgba(214, 255, 65, 0.3);

      .game-item-title{
        background: linear-gradient(180deg, rgba(214, 255, 65, 0.8) -40.95%, rgba(214, 255, 65, 0.00) 108.82%);
      }
    }

    .game-item-inner{
      .game-item-img{
        display: flex; justify-content: center; align-items: center;
        overflow:hidden;
        border-radius: 10px;
        background: #000;

        img{ width: 100%; min-width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
      }
      .game-item-title{ 
        font-family: "Microgramma D Extended", sans-serif; font-size: .7rem; font-weight: 700;
        color: var(--cream-color); 
        border-radius: 10px;

        a{ 
          display: block;
          color: var(--cream-color); 
          text-decoration:none; 
          text-align: center;
          padding: .75rem .25rem;
        }
      }
    }
  }

/*--- ACCOUNT ---*/
.account-wallet{
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.20);
  color: var(--cream-color);
}
.account-level{
  border-radius: 10px;
  background: var(--glass-dark-mode-color);
  box-shadow: 0 0 20px 0 rgba(214, 255, 65, 0.20);
  color: var(--light-forest-color);

  .badge{
    border-color: var(--light-forest-color);
    color: var(--light-forest-color);
  }

  .acc-progress{ 
    position: relative;
    z-index: 1;
    overflow: unset;

    .progress-bar{  background: linear-gradient(90deg, var(--lime-color) 0%, #EFFFD9 120.7%);}

    &[data-level=1]{
        background: red;
    }

    &::after{
      content: ' ';
      background: url('../img/lvl1-percent.png') no-repeat center center;
      position: absolute; z-index: 99;
      top: -10px; right: -10px;
      width: 19px; height: 21px;
    }
  }
}


/*--- FOOTER ---*/
.nav-pills.nav-footer{
  padding: 10px;
  border-radius: 100px;
  background: rgba(36, 36, 36, 0.30); backdrop-filter: blur(12px);
  min-width: 360px;
  
  &::before {
    padding: 1px; /* control the border thickness */
    content: "";
    position: absolute;
    inset: 0;
    border-radius:100px;
    background: linear-gradient(45deg, #ffffff, #999999);
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .1;
  }

  .nav-link{
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-size: 8px;
    color: var(--cream-color);
    text-align: center;

    &.active{
      border-radius: 40px; border: 1px solid var(--lime-color);
      background: rgba(141, 170, 31, 0.58);
    }

    img{ margin-bottom: 0.25rem; }

    &.nav-cart{
      display: inline-flex; justify-content: center; align-items: center;
      aspect-ratio: 1 / 1;
      float: right;
      border-radius: 50%;
      background-color: var(--lime-color);
    }
  }
}



/*--- SCREENS ---*/
@media (max-width: 991.98px){
  :root{
    /* width scales with viewport but capped for readability */
    --w: clamp(140px, 44vw, 180px);
    --h: clamp(180px, 50vw, 220px);
    --gap: 14px;
  }
   /* slightly softer tilt on mobile */
  .pos--1 .prize-card{ transform: translateX(-8%)  rotateY(14deg) scale(.92); }
  .pos-1  .prize-card{ transform: translateX( 8%)  rotateY(-14deg) scale(.92); }
  .pos--2 .prize-card{ transform: translateX(-14%) rotateY(22deg) scale(.84); }
  .pos-2  .prize-card{ transform: translateX( 14%) rotateY(-22deg) scale(.84); }

  /* keep controls inside the viewport nicely */
  .ctrl{ width:40px; height:40px; }
  .prev{ left: 4px; }
  .next{ right: 4px; }

  .badge{ font-size:.5rem; }
  .progress{ border-radius: 4px; height: 4px; }

  .dashboard-hotprizes::before{ background-image: url('../img/dashboard-hotprizes-bg.png'); }

  .prod-list {
    .prod-item {
      .prod-item-inner {
        .prod-item-stock{ font-size: .6rem; }
      }
    }
  }
}

@media (max-width: 767px) {
  .banner{
    height: auto;

    img{ height:auto; }
  }
}

/* Very small phones */
@media (max-width: 399.98px){
  :root{
    --w: clamp(120px, 48vw, 160px);
    --h: clamp(160px, 54vw, 200px);
    --gap: 12px;
  }

  .badge{ font-size: .45rem; }
  .progress{ border-radius: 3px; height: 3px; }



  .dashboard-hotprizes::before{ background-image: url('../img/dashboard-hotprizes-bg.png'); }

  .cf-item-caption{ font-size: 8px; }
  .coverflow-indicators{ gap:6px; }
  .coverflow-indicators button{ width:8px; height:8px; }

  .dashboard-categories-list {
    .dashboard-categories-item {
      .dashboard-categories-item-inner{
        margin-bottom: 0; padding: .3rem;
        min-height: 100px;
        font-size: .8rem;

        &::before{ transform:scale(0.67); bottom: -4rem; left: -4rem;}
        &::after{ transform: scale(1.1); top:.5rem; right:.5rem; }
      }
    }
  }

  .prod-list{
    .prod-item{
      .prod-item-inner{
        .prod-item-stock{ font-size: .55rem; }
        .prod-item-title{ font-size: 12px;}
        .prod-item-status{ font-size: 1rem; }
        .prod-item-percent{ font-size: 8px; }
      }
    }
  }
}