body {
  font-size: .875rem;
  height: 100%;
  background-image: url("/_pic/background-pattern.png") !important;
  background-blend-mode: difference;
  overflow-x: hidden;
  width: 100%;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.fading-element {
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .hide-mobile {
    display: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

@media (min-width: 992px) {
  .row-cols-lg-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
  }
}

.navbar-nav .nav-item .nav-link,
.navbar-brand {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

.ms-10 {
  margin-left: 10rem !important;
}

.me-10 {
  margin-right: 10rem !important;
}

.top-20 {
  top: 15% !important;
}

.mt-10 {
  margin-top: 8rem !important;
}

#mobile-header.menu-open .position-absolute.top-20.start-50 {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

#mobile-header .position-absolute.top-20.start-50 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
}

#GoToButton {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  color: black;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}

.hr-style {
  border: none;
  height: 2px;
  width: 90%;
  margin: 30px auto;

  background-image: linear-gradient(
          to right,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.75),
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0.75),
          rgba(255, 255, 255, 0)
  );
}

.ygo-card-img {
  transition: .4s;
  opacity: 0.5;
}

.ygo-card-img:hover {
  transition: .4s;
  transform: scale(1.05);
  opacity: 1.0;
}

.ygo-card-img-list {
  transition: .4s;
  opacity: 0.8;
}

.ygo-card-img-list:hover {
  transition: .4s;
  transform: scale(1.05);
  opacity: 1.0;

  animation: border-glow-ultra-rare 3s linear infinite alternate;
}

.ygo-card-img-text {
  transition: .6s;
  color: rgb(36, 36, 36);
}

.ygo-card-img-text:hover {
  transition: .6s;
  color: rgb(108, 117, 125);
}

.ygo-card-img-no-glow {
  transition: .4s;
  opacity: 0.8;
}

.ygo-card-img-no-glow:hover {
  transition: .4s;
  transform: scale(1.05);
  opacity: 1.0;
}

.image-wrapper img {
  height: 25px;
  width: auto;
}

.monster-textarea {
  height: 150px!important;
}

.progess-bar-icons {
  height: 50px;
}


.disabled-point-event {
  pointer-events: none;
}

.vertical-center {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
}

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
  color: inherit;
  text-decoration: inherit;
}

#search-results a.list-group-item {
  cursor: pointer;
}

/* Rarity Badges Background */
.bg-common {
  color: #fff !important;
  background-color: #4f4f4f !important;
}

.bg-common-parallel-rare {
  color: #ccb473 !important;
  background-color: #4f4f4f !important;
}

.bg-rare {
  color: #000 !important;
  background-color: #cecece !important;
}

.bg-rare-black {
  color: #cecece !important;
  background-color: #000 !important;
}

.bg-super-rare {
  color: #000 !important;
  background-color: #ccb473 !important;
}

.bg-ultra-rare {
  color: #000 !important;
  background-color: #ffce00 !important;
}

.bg-ultra-rare-red {
  color: #000 !important;
  background-color: #ff7272 !important;
}

.bg-ultra-rare-blue {
  color: #000 !important;
  background-color: #72a4ff !important;
}

.bg-ultra-rare-green {
  color: #000 !important;
  background-color: #7CFC00 !important;
}

.bg-ultra-rare-purple {
  color: #000 !important;
  background-color: #5D3FD3 !important;
}

.bg-ultra-rare-silver {
  color: #000 !important;
  background-color: #c0c0c0 !important;
}

.bg-secret-rare {
  color: #000 !important;
  background-color: #fff6cf !important;
}

.bg-collectors-rare {
  color: #000 !important;
  background-color: #b94421 !important;
}

.bg-starlight-rare {
  color: #000 !important;
  background-color: #a97eb2 !important;
}

.bg-quater-century-secret-rare {
  color: #000 !important;
  background-color: #cb0017 !important;
}

.bg-ghost-rare {
  color: #000 !important;
  background-color: #fff !important;
}

.bg-ultimate-rare {
  color: #000 !important;
  background-color: #777777 !important;
}

.bg-platinum-secret-rare {
  color: #000 !important;
  background-color: #fff6cf !important;
}

.bg-egyptian-hieroglyphic-ultra-rare {
  color: #ffce00 !important;
  background-color: #000 !important;
}

.bg-egyptian-hieroglyphic-secret-rare {
  color: #fff6cf !important;
  background-color: #000 !important;
}

.bg-gold-rare {
    color: #fce76a !important;
    background-color: #000 !important;
}

.bg-premium-gold-rare {
    color: #000 !important;
    background-color: #fce76a !important;
}

.holo-container {
  position: absolute;
  top: 18.15%;
  left: 11.81%;
  width: 76.61%;
  height: 52.42%;
  overflow: hidden;
  opacity: 1.0;
}

.holo-container-pendulum {
  position: absolute;
  top: 17.98%;
  left: 6.40%;
  width: 87.08%;
  height: 44.30%;
  overflow: hidden;
  opacity: 1.0;
}

.holo-full-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1.0;
}

.card-text-container {
  position: absolute;
  top: 74%;
  left: 5.29%;
  width: 89.30%;
  height: 20.84%;
  overflow: hidden;
}

.card-text-container-pendulum {
  position: absolute;
  top: 62.19%;
  left: 5.29%;
  width: 89.42%;
  height: 32.74%;
  overflow: hidden;
}

.super-rare .rarity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Der Holo-Effekt */
  background: linear-gradient(
          135deg,
          rgba(255, 0, 0, 1.0),
          rgba(255, 150, 0, 1.0),
          rgba(255, 255, 0, 1.0),
          rgba(0, 255, 0, 1.0),
          rgba(0, 0, 255, 1.0),
          rgba(150, 0, 255, 1.0)
  );

  background-size: 150% 150%;

  mix-blend-mode: screen;
  opacity: 0.7;
  animation: holo-move 2s ease-in-out infinite alternate;
}

.rarity-overlay.gyro-active {
  animation: none !important;
  background-position: var(--holo-pos-x, 67%) var(--holo-pos-y, 79%) !important;
  opacity: calc(0.2 + (var(--holo-intensity, 0) * 0.5)) !important;
  will-change: background-position, opacity;
}

.platinum-rare-holo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Der Holo-Effekt */
  background: linear-gradient(
          135deg,
          rgba(198, 197, 200, 0.1),
          rgba(198, 197, 200, 0.3),
          rgba(212, 211, 213, 1.0),
          rgba(226, 226, 227, 0.3),
          rgba(212, 211, 213, 0.1)
  );

  background-size: 150% 150%;

  mix-blend-mode: screen;
  opacity: 0.4;
  animation: holo-move 2s ease-in-out infinite alternate;
}

.platinum-rare-holo.gyro-active {
  animation: none !important;
  background-position: var(--holo-pos-x, 67%) var(--holo-pos-y, 79%) !important;
  opacity: calc(0.2 + (var(--holo-intensity, 0) * 0.5)) !important;
  will-change: background-position, opacity;
}

@keyframes holo-move {
  from { background-position: 67% 79%; }
  to { background-position: 0 0; }

  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.2;
  }
}

.secret-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/secret_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: secret-rare-animation 2s ease-in-out infinite alternate;
}

.secret-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.prismatic-secret-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/prismatic_secret_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: secret-rare-animation 2s ease-in-out infinite alternate;
}

.prismatic-secret-rare.gyro-active {
  animation: none !important;
  background-position: var(--holo-pos-x, 50%) var(--holo-pos-y, 50%) !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: background-position, opacity;
}

.egyptian-hieroglyphic-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/egyptian_hieroglyphic_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: egyptian-hieroglyphic-rare-animation 2s ease-in-out infinite alternate;
}

.egyptian-hieroglyphic-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes egyptian-hieroglyphic-rare-animation {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.0;
  }
}

@keyframes secret-rare-animation {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.1;
  }
}

.platinum-secret-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/platinum_secret_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: platinum-secret-rare-animation 2s ease-in-out infinite alternate;
}

.platinum-secret-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes platinum-secret-rare-animation {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1.0;
  }
}

.ultimate-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ultimate_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: ultimate-rare-animation 2s ease-in-out infinite alternate;
}

.ultimate-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.ultimate-rare-pendulum {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ultimate_rare_pattern_pendulum.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: ultimate-rare-animation 2s ease-in-out infinite alternate;
}

.ultimate-rare-pendulum.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes ultimate-rare-animation {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.1;
  }
}

.ultimate-rare-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ultimate_rare_noise.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: ultimate-rare-noise-animation 2s ease-in-out infinite alternate;
}

.ultimate-rare-noise.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.ultimate-rare-noise-pendulum {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ultimate_rare_noise_pendulum.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: ultimate-rare-noise-animation 2s ease-in-out infinite alternate;
}

.ultimate-rare-noise-pendulum.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.ultimate-rare-old-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ultimate_rare_noise_old.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: ultimate-rare-noise-animation 2s ease-in-out infinite alternate;
}

.ultimate-rare-old-noise.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.ultimate-rare-old-noise-pendulum {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ultimate_rare_noise_pendulum_old.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: ultimate-rare-noise-animation 2s ease-in-out infinite alternate;
}

.ultimate-rare-old-noise-pendulum.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes ultimate-rare-noise-animation {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.5;
  }
}

.collectors-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/collectors_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: collectors-rare-animation 2s ease-in-out infinite alternate;
}

.collectors-rare.gyro-active {
  animation: none !important;
  opacity: calc(1.0 - (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.collectors-rare-pendulum {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/collectors_rare_pattern_pendulum.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: collectors-rare-animation 2s ease-in-out infinite alternate;
}

.collectors-rare-pendulum.gyro-active {
  animation: none !important;
  opacity: calc(1.0 - (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes collectors-rare-animation {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.1;
  }
}

.starlight-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/starlight_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: starlight-rare-animation 2s ease-in-out infinite alternate;
}

.starlight-rare.gyro-active {
  animation: none !important;
  opacity: calc(1.0 - (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes starlight-rare-animation {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.1;
  }
}

.starlight-rare-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/rainbow_border_pattern.jpg");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: rainbow-border-animation 2s ease-in-out infinite alternate;
}

.starlight-rare-2-pendulum {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/rainbow_border_pattern_pendulum.jpg");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: rainbow-border-animation 2s ease-in-out infinite alternate;
}

.starlight-rare-2.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.starlight-rare-2-pendulum.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes rainbow-border-animation {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1.0;
  }
}

.grand-master-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/grandmaster_rare/114854.png");
  background-size: contain;

  mix-blend-mode: normal;
  opacity: 1.0;
}


.Anniversary-25th-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/25th_anniversary_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: Anniversary-25th-rare-animation 2s ease-in-out infinite alternate;
}

.Anniversary-25th-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.secret-rare-10000 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/100000_secret_rare.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: secret-rare-10000-animation 2s ease-in-out infinite alternate;
}

.secret-rare-10000.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes secret-rare-10000-animation {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes Anniversary-25th-rare-animation {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1.0;
  }
}

.dragonmaid-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/dragonmaid_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: dragonmaid-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.dragonmaid-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes dragonmaid-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.7;
  }
}

.orcust-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/orcust_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: orcust-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.orcust-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes orcust-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.7;
  }
}

.punk-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/punk_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: punk-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.punk-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes punk-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.7;
  }
}

.ots-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ots_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: ots-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.ots-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes ots-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.7;
  }
}

.rq-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/rq_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: rq-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.rq-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes rq-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.7;
  }
}

.judge-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/judge_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: judge-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.judge-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes judge-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.7;
  }
}

.wc25-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/wc25_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: wc25-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.wc25-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes wc25-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1.0;
  }
}

.wc26-ultra-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/wc26_pattern.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: wc26-ultra-rare-animation 2s ease-in-out infinite alternate;
}

.wc26-ultra-rare.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

@keyframes wc26-ultra-rare-animation {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1.0;
  }
}


.parallel-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-image: url("/_pic/holo/dt_parallel_rare.png");
  mask-image: url("/_pic/holo/dt_parallel_rare.png");

}

.parallel-rare::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
          135deg,
          rgba(255, 0, 0, 1.0),
          rgba(255, 150, 0, 1.0),
          rgba(255, 255, 0, 1.0),
          rgba(0, 255, 0, 1.0),
          rgba(0, 0, 255, 1.0),
          rgba(150, 0, 255, 1.0)
  );
  background-size: 100% 100%;

  animation: holo-move 2s ease-in-out infinite alternate;

  mix-blend-mode: screen;
  opacity: 0.6;
}

.parallel-rare.gyro-active::before {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.mosaic-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-image: url("/_pic/holo/mosaic_rare.png");
  mask-image: url("/_pic/holo/mosaic_rare.png");

}

.mosaic-rare::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
          135deg,
          rgba(255, 0, 0, 1.0),
          rgba(255, 150, 0, 1.0),
          rgba(255, 255, 0, 1.0),
          rgba(0, 255, 0, 1.0),
          rgba(0, 0, 255, 1.0),
          rgba(150, 0, 255, 1.0)
  );
  background-size: 100% 100%;

  animation: holo-move 2s ease-in-out infinite alternate;

  mix-blend-mode: screen;
  opacity: 0.6;
}

.mosaic-rare.gyro-active::before {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.starfoil-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-image: url("/_pic/holo/starfoil_rare_pattern.png");
  mask-image: url("/_pic/holo/starfoil_rare_pattern.png");

}

.starfoil-rare::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
          135deg,
          rgba(255, 0, 0, 1.0),
          rgba(255, 150, 0, 1.0),
          rgba(255, 255, 0, 1.0),
          rgba(0, 255, 0, 1.0),
          rgba(0, 0, 255, 1.0),
          rgba(150, 0, 255, 1.0)
  );
  background-size: 100% 100%;

  animation: holo-move 2s ease-in-out infinite alternate;

  mix-blend-mode: screen;
  opacity: 0.6;
}

.starfoil-rare.gyro-active::before {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.shatterfoil-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-image: url("/_pic/holo/shatterfoil_pattern.png");
  mask-image: url("/_pic/holo/shatterfoil_pattern.png");

}

.shatterfoil-rare::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
          135deg,
          rgba(255, 0, 0, 1.0),
          rgba(255, 150, 0, 1.0),
          rgba(255, 255, 0, 1.0),
          rgba(0, 255, 0, 1.0),
          rgba(0, 0, 255, 1.0),
          rgba(150, 0, 255, 1.0)
  );
  background-size: 100% 100%;

  animation: holo-move 2s ease-in-out infinite alternate;

  mix-blend-mode: screen;
  opacity: 0.6;
}

.shatterfoil-rare.gyro-active::before {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

.full-card-sparkle-no-boarder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/fullcard_sparkle_no_boarder.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: full-card-sparkle-animation 2s ease-in-out infinite alternate;
}

.full-card-sparkle-no-boarder.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 0.5)) !important;
  will-change: opacity;
}

.full-card-sparkle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/fullcard_sparkle.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: full-card-sparkle-animation 2s ease-in-out infinite alternate;
}

.full-card-sparkle.gyro-active {
  animation: none !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 0.5)) !important;
  will-change: opacity;
}

@keyframes full-card-sparkle-animation {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.3;
  }
}

.ghost-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Der Holo-Effekt */
  background: linear-gradient(
          135deg,
          rgba(192,192,192, 1.0),
          rgba(248,248,255, 1.0)
  );

  background-size: 150% 150%;

  mix-blend-mode: normal;
  opacity: 1.0;
  animation: ghost-rare-move 2s ease-in-out infinite alternate;
}

.ghost-rare.gyro-active {
  animation: none !important;
  background-position: var(--holo-pos-x, 50%) var(--holo-pos-y, 50%) !important;
  opacity: calc(0.0 + (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: background-position, opacity;
}

@keyframes ghost-rare-move {
  from { background-position: 67% 79%; }
  to { background-position: 0 0; }

  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1.0;
  }
}

.gold-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/gold_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: normal;
  opacity: 1.0;
}

.gold-rare-pendulum {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/gold_rare_pattern_pendulum.png");
  background-size: contain;

  mix-blend-mode: normal;
  opacity: 1.0;
}

.platinum-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/platinum_rare_pattern.png");
  background-size: contain;

  mix-blend-mode: normal;
  opacity: 1.0;
}

.ultra-horizontal-rare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("/_pic/holo/ultra_horizontal_rare.png");
  background-size: contain;

  mix-blend-mode: screen;
  opacity: 0.0;

  animation: secret-rare-animation 2s ease-in-out infinite alternate;
}

.ultra-horizontal-rare.gyro-active {
  animation: none !important;
  opacity: calc(1.0 - (var(--holo-intensity, 0) * 1.0)) !important;
  will-change: opacity;
}

/**  Glow Effects  **/
.ultra-rare-glow {
  animation: border-glow-ultra-rare 3s linear infinite alternate;
}
@keyframes border-glow-ultra-rare {
  from {
    box-shadow:
            0 0 2px 1px rgb(218,165,32, 0.1),
            0 0 5px 3px rgb(238,232,170, 0.7),
            0 0 10px 8px rgb(255,215,0, 0.1);
  }
  to {
    box-shadow:
            0 0 2px 1px rgb(238,232,170, 0.7),
            0 0 5px 3px rgb(218,165,32, 0.1),
            0 0 10px 8px rgb(255,215,0, 0.7);
  }
}
.ultra-rare-red-glow {
  animation: border-glow-ultra-rare-red 3s linear infinite alternate;
}
@keyframes border-glow-ultra-rare-red {
  from {
    box-shadow:
            0 0 2px 1px rgb(136, 8, 8, 0.1),
            0 0 5px 3px rgb(248, 131, 121, 0.7),
            0 0 10px 8px rgb(220, 20, 60, 0.1);
  }
  to {
    box-shadow:
            0 0 2px 1px rgb(248, 131, 121, 0.7),
            0 0 5px 3px rgb(136, 8, 8, 0.1),
            0 0 10px 8px rgb(220, 20, 60, 0.7);
  }
}
.ultra-rare-blue-glow {
  animation: border-glow-ultra-rare-blue 3s linear infinite alternate;
}
@keyframes border-glow-ultra-rare-blue {
  from {
    box-shadow:
            0 0 2px 1px rgb(115, 147, 179, 0.1),
            0 0 5px 3px rgb(137, 207, 240, 0.7),
            0 0 10px 8px rgb(0, 255, 255, 0.1);
  }
  to {
    box-shadow:
            0 0 2px 1px rgb(137, 207, 240, 0.7),
            0 0 5px 3px rgb(115, 147, 179, 0.1),
            0 0 10px 8px rgb(0, 255, 255, 0.7);
  }
}

.ultra-rare-green-glow {
  animation: border-glow-ultra-rare-green 3s linear infinite alternate;
}
@keyframes border-glow-ultra-rare-green {
  from {
    box-shadow:
            0 0 2px 1px rgb(9, 121, 105, 0.1),
            0 0 5px 3px rgb(170, 255, 0, 0.7),
            0 0 10px 8px rgb(0, 128, 0, 0.1);
  }
  to {
    box-shadow:
            0 0 2px 1px rgb(170, 255, 0, 0.7),
            0 0 5px 3px rgb(9, 121, 105, 0.1),
            0 0 10px 8px rgb(0, 128, 0, 0.7);
  }
}

.ultra-rare-purple-glow {
  animation: border-glow-ultra-rare-purple 3s linear infinite alternate;
}
@keyframes border-glow-ultra-rare-purple {
  from {
    box-shadow:
            0 0 2px 1px rgb(128, 0, 128, 0.1),
            0 0 5px 3px rgb(207, 159, 255, 0.7),
            0 0 10px 8px rgb(93, 63, 211, 0.1);
  }
  to {
    box-shadow:
            0 0 2px 1px rgb(207, 159, 255, 0.7),
            0 0 5px 3px rgb(128, 0, 128, 0.1),
            0 0 10px 8px rgb(93, 63, 211, 0.7);
  }
}

.secret-rare-glow {
  animation: border-glow-secret-rare 3.5s linear infinite alternate;
}
@keyframes border-glow-secret-rare {
  from {
    box-shadow:
            0 0 2px 1px rgb(211,211,211, 0.1),
            0 0 5px 3px rgb(169,169,169, 0.7),
            0 0 10px 8px rgb(192,192,192, 0.1);
  }
  to {
    box-shadow:
            0 0 2px 1px rgb(169,169,169, 0.7),
            0 0 5px 3px rgb(211,211,211, 0.1),
            0 0 10px 8px rgb(192,192,192, 0.7);
  }
}

.rare-black-glow {
  animation: border-glow-rare-black 3.5s linear infinite alternate;
}
@keyframes border-glow-rare-black {
  from {
    box-shadow:
            0 0 2px 1px rgb(59,59,59, 0.1),
            0 0 5px 3px rgb(13,13,13, 0.7),
            0 0 10px 8px rgb(82,82,82, 0.1);
  }
  to {
    box-shadow:
            0 0 2px 1px rgb(13,13,13, 0.7),
            0 0 5px 3px rgb(59,59,59, 0.1),
            0 0 10px 8px rgb(82,82,82, 0.7);
  }
}

/* Hardware-Beschleunigung (GPU) für alle Holo-Ebenen erzwingen */
.holo-container div,
.holo-container-pendulum div,
.holo-full-container div {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity, background-position;
}

/* Pausiert alle CSS-Animationen in Elementen, die diese Klasse haben */
.is-paused,
.is-paused * {
  animation-play-state: paused !important;
}

/* =========================================
   ZUSTANDS-BADGES (CONDITIONS) & FLAGS
   ========================================= */
.cond-badge-1 { background-color: #0f5132; color: #fff; border: 1px solid #198754; } /* Mint */
.cond-badge-2 { background-color: #198754; color: #fff; border: 1px solid #20c997; } /* Near Mint */
.cond-badge-3 { background-color: #20c997; color: #000; border: 1px solid #198754; } /* Excellent */
.cond-badge-4 { background-color: #ffc107; color: #000; border: 1px solid #d39e00; } /* Good */
.cond-badge-5 { background-color: #fd7e14; color: #fff; border: 1px solid #e8590c; } /* Light Played */
.cond-badge-6 { background-color: #dc3545; color: #fff; border: 1px solid #b02a37; } /* Played */
.cond-badge-7 { background-color: #842029; color: #fff; border: 1px solid #5c161d; } /* Poor */

.first-ed-badge { background-color: #8c7322; color: #fff; border: 1px solid #d4af37; }