/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.primary-button {
  border-radius: 0.3125rem;
  border: 1.5px solid #ff5e00;
  background: linear-gradient(
    226deg,
    #ffc800 23.89%,
    #ff8c00 42.09%,
    #ec3102 61.6%,
    #c90502 76.11%
  );
}

.secondary-button {
  border-radius: 0.3125rem;
  border: 1.5px solid #26c000;
  background: linear-gradient(
    226deg,
    #76f401 23.89%,
    #00dd0f 42.09%,
    #18c144 61.6%,
    #099400 76.11%
  );
}

.tertiary-button {
  border-radius: 0.3125rem;
  border: 1.5px solid #0096f3;
  background: linear-gradient(
    226deg,
    #0df 23.89%,
    #00b7ff 42.09%,
    #028bec 61.6%,
    #0258c9 76.11%
  );
}

.quaternary-button {
  border-radius: 0.3125rem;
  border: 1.5px solid #9e9e9e;
  background: linear-gradient(
    226deg,
    #d2d2d2 23.89%,
    #aaa 42.09%,
    #727272 61.6%,
    #585858 76.11%
  );
}

.gradient-border {
  border: 1px solid;
  border-image-slice: 1;
  border-width: 3px;
  border-image-source: linear-gradient(
    88deg,
    #01f 99.99%,
    #e600ff 74.02%,
    #ff0004 39.54%,
    #ffae00 0.01%
  );
}

.scroll {
  margin: auto;
  width: 100%;
  color: #666666;
  overflow: hidden;
}

.scroll-list {
  animation: loop infinite linear 24s both;
}

.liner-section {
  opacity: 0.7;
  background: linear-gradient(
    88deg,
    #ffae00 0.01%,
    #ff0004 39.54%,
    #e600ff 74.02%,
    #01f 99.99%
  );
}

.achieved-mission {
  background: linear-gradient(180deg, #eeadfb 0%, #2bb8ff 100%);
}

.achieved-button {
  background: linear-gradient(90deg, #eeadfb 0%, #2bb8ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mission-progress {
  background: linear-gradient(90deg, #eeadfb 0%, #2bb8ff 100%);
}

.bg-gradient {
  opacity: 0.7;
  background: linear-gradient(
    88deg,
    rgba(255, 174, 0, 0.8) 0.01%,
    rgba(255, 0, 4, 0.8) 39.54%,
    rgba(230, 0, 255, 0.8) 74.02%,
    rgba(0, 17, 255, 0.8) 99.99%
  );
}

.bg-pack-normal {
  background: linear-gradient(
    135deg,
    #00176a 0%,
    #0042de 25%,
    #0afaf0 50%,
    #042fca 75%,
    #021d5f 100%
  );
}

.bg-pack-rare {
  background: linear-gradient(
    135deg,
    #a70001 0%,
    #ea0b03 25.48%,
    #fecdc9 50%,
    #e80602 75%,
    #c10002 100%
  );
}

.bg-pack-super-rare {
  background: linear-gradient(
    315deg,
    #c8a92a 0%,
    #fcdb41 25.24%,
    #fcf992 50.48%,
    #edcf42 75.24%,
    #e6bf07 100%
  );
}

.bg-prize-rainbow {
  background: linear-gradient(
    115deg,
    rgba(255, 79, 226, 1) 0%,
    rgba(255, 102, 102, 1) 10%,
    rgba(252, 130, 73, 1) 16%,
    rgba(255, 224, 25, 1) 32%,
    rgba(165, 250, 67, 1) 46%,
    rgba(70, 254, 78, 1) 52%,
    rgba(38, 255, 136, 1) 58%,
    rgba(79, 243, 255, 1) 72%,
    rgba(133, 139, 255, 1) 89%,
    rgba(206, 82, 255, 1) 100%
  );
}

.bg-prize-rainbow-vertical {
  background: linear-gradient(
    175deg,
    rgba(255, 79, 226, 1) 0%,
    rgba(255, 102, 102, 1) 10%,
    rgba(252, 130, 73, 1) 16%,
    rgba(255, 224, 25, 1) 32%,
    rgba(165, 250, 67, 1) 46%,
    rgba(70, 254, 78, 1) 52%,
    rgba(38, 255, 136, 1) 58%,
    rgba(79, 243, 255, 1) 72%,
    rgba(133, 139, 255, 1) 89%,
    rgba(206, 82, 255, 1) 100%
  );
}

.bg-prize-gold {
  background: linear-gradient(
    115deg, 
    #b38728 0%, 
    #fcf6ba 25%, 
    #bf953f 50%, 
    #fbf5b7 75%, 
    #aa771c 100%
  );
}

.bg-prize-gold-vertical {
  background: linear-gradient(
    175deg, 
    #b38728 0%, 
    #fcf6ba 25%, 
    #bf953f 50%, 
    #fbf5b7 75%, 
    #aa771c 100%
  );
}

.bg-prize-silver {
  background: linear-gradient(
    115deg, 
    #707070 0%, 
    #f0f0f0 25%, 
    #9e9e9e 50%, 
    #e0e0e0 75%, 
    #7f7f7f 100%
  );
}
.bg-prize-silver-vertical {
  background: linear-gradient(
    175deg, 
    #707070 0%, 
    #f0f0f0 25%, 
    #9e9e9e 50%, 
    #e0e0e0 75%, 
    #7f7f7f 100%
  );
}

.bg-prize-bronze {
  background: linear-gradient(
    115deg, 
    #5c3a21 0%, 
    #e8b68a 25%, 
    #8c5630 50%, 
    #d4986a 75%, 
    #593518 100%
  );
}

.bg-prize-bronze-vertical {
  background: linear-gradient(
    175deg, 
    #5c3a21 0%, 
    #e8b68a 25%, 
    #8c5630 50%, 
    #d4986a 75%, 
    #593518 100%
  );
}

.bg-prize-iron {
  background: linear-gradient(
    115deg, 
    #2c3e50 0%,
    #bdc3c7 50%,
    #2c3e50 100%
  );
}

.bg-prize-iron-vertical {
  background: linear-gradient(
    175deg, 
    #2c3e50 0%,
    #bdc3c7 50%,
    #2c3e50 100%
  );
}

.bg-prize-slate {
  background: linear-gradient(
    135deg, 
    #8f9e95 0%,
    #6f8076 50%,
    #4e5c55 100%
  );
}

.bg-prize-slate-vertical {
  background: linear-gradient(
    175deg, 
    #8f9e95 0%,
    #6f8076 50%,
    #4e5c55 100%
  );
}

.card {
  position: relative;
  cursor: pointer;
  perspective: 1000px;
  transition: all 0.5s ease;
}

.card.absolute {
  position: absolute !important;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

.game-types-swiper .swiper-button-disabled .icon {
  color: transparent;
}

@media (width < 48rem) {
  .scrollbar-hidden {
    scrollbar-width: none;
  }

  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }
}

@keyframes loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}