/* =========================================
   CARD PREVIEW WRAPPER
   ========================================= */

.card-preview {
  display: block;
  position: relative;
  padding: 10px;
  margin: 5px;
}


/* =========================================
   ORACLE / GATHERER LINK (STICKY)
   ========================================= */

#gather-oracle-link:not(.no-sticky),
#gather-oracle-link--reverse {
  position: sticky;
  top: 20px;
  margin-top: 16px;
  text-align: center;
  display: block;
  width: 125px;
  margin: 0 auto;
  z-index: 200;
}


/* =========================================
   PREVIEW CONTAINER
   ========================================= */

#card-preview,
#card-preview--reverse {
  height: 100%;
  position: relative;
  text-align: center;
  margin-top: 20px;
}


/* =========================================
   PREVIEW IMAGE (STICKY)
   ========================================= */

#preview-card,
#preview-card--reverse {
  width: 230px;
  position: sticky;
  -webkit-position: sticky;
  top: 77px;
}


/* =========================================
   MOBILE ADJUSTMENTS
   ========================================= */

@media only screen and (max-width: 558px) {

  .card-list-item {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  #preview-card {
    width: 175px;
  }

}



/* Clickable Card Name */
.show-card {
  display: inline-block;
  position: relative;
  cursor: pointer;

  color: var(--mtg-orange);
  text-decoration: underline dotted;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.show-card:hover {
  color: var(--mtg-orange-hover);
  text-decoration: underline solid;
}


/* Floating Card Image Preview */
.show-card__image {
  position: fixed;
  top: 30%;
  width: 223px;
  height: auto;

  z-index: 9999;
  pointer-events: none;

  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);

  transition: transform 0.15s ease;
}


/* =========================================
   ROTATED CARD (SPLIT / FUSE)
   ========================================= */

.rotated-card {
  width: 265px !important;
  transform: rotate(90deg);
}