/*
 * 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.80) 0.01%, rgba(255, 0, 4, 0.80) 39.54%, rgba(230, 0, 255, 0.80) 74.02%, rgba(0, 17, 255, 0.80) 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);
}



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