/* The collectible reverse face. The opening sequence owns size, rise and flip. */
#opening-reward .reward-back {
  --card-foil: var(--rarity, var(--rarity-common, #a7c7d9));
  overflow: hidden;
  isolation: isolate;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 26% 14%, #d7f6ff25, transparent 48%) padding-box,
    radial-gradient(ellipse at 82% 92%, color-mix(in srgb, var(--card-foil) 30%, transparent), transparent 58%) padding-box,
    repeating-linear-gradient(128deg, #dcf8ff08 0 1px, transparent 1px 4px) padding-box,
    linear-gradient(145deg, #1d4658 0%, #081d2d 32%, #102d40 56%, #03121f 100%) padding-box,
    conic-gradient(from 30deg, #e2fbff, #557b90 15%, var(--card-foil) 26%, #071520 42%, #badcec 53%, #4c768d 68%, #d2f6ff 82%, #183d50 94%, #e2fbff) border-box;
  box-shadow:
    inset 1px 1px 0 #f1fcff52,
    inset -1px -2px 0 #000b,
    inset 0 0 0 3px #0a1d2b,
    0 2px 0 #3f6175,
    0 4px 0 #02101a,
    0 12px 24px #0008,
    0 0 30px color-mix(in srgb, var(--card-foil) 34%, transparent);
}

#opening-reward .reward-back::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid #a6dbed40;
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 47.5%, #c4efff12 48%, transparent 48.5%) center / 18px 18px,
    radial-gradient(ellipse 80% 55% at 50% 42%, color-mix(in srgb, var(--card-foil) 19%, transparent), transparent 80%);
  box-shadow: inset 0 1px 0 #e7fbff22, inset 0 -1px 0 #000b;
  pointer-events: none;
}

#opening-reward .reward-back::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 3;
  border-radius: 11px;
  background: linear-gradient(112deg, transparent 32%, #7ad9ff08 40%, #e8faff57 46%, #ffffff8a 48%, #bd95ff24 51%, #61e6ff20 55%, transparent 66%) 150% 50% / 280% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .25;
  pointer-events: none;
}

#opening-reward .reward-back .brand-mark.lootvault-mark {
  position: relative;
  z-index: 1;
  width: 76%;
  max-width: 91px;
  height: auto;
  aspect-ratio: 1;
  background: url('logo.webp') center / contain no-repeat;
  mix-blend-mode: normal;
  filter: drop-shadow(0 2px 0 #01131f) drop-shadow(0 8px 5px #0009) drop-shadow(0 0 12px color-mix(in srgb, var(--card-foil) 33%, transparent));
}

#opening-reward .reward-back > strong {
  position: relative;
  z-index: 1;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: #d3f5ff;
  background: linear-gradient(180deg, #fff 3%, #dcf6ff 40%, #70b1cb 52%, #c5ebf7 72%, #eefbff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #03131f);
}

#opening-reward.is-rising .reward-back::after { animation: lootr-card-foil 1.35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lootr-card-foil {
  0% { background-position: 150% 50%; opacity: .12; }
  35% { opacity: .85; }
  75% { opacity: .6; }
  100% { background-position: -50% 50%; opacity: .2; }
}
@media (max-width:760px) {
  #opening-reward .reward-back { gap: 9px; }
  #opening-reward .reward-back > strong { font-size: 24px; }
}
@media (prefers-reduced-motion:reduce) {
  #opening-reward.is-rising .reward-back::after { animation: none; background-position: 62% 50%; opacity: .18; }
}