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

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