/* React Bits HoloCard adapted for Tiebrekr. License: docs/licenses/react-bits.txt. */
.tb-holo-card {
  position: relative;
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
.tb-holo-card--full { width: 100%; max-width: 360px; margin-inline: auto; }
.tb-holo-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
@media (min-width: 640px) { .tb-holo-card--full { max-width: 400px; } }
.tb-holo-card__rotor {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: perspective(1100px) rotateX(var(--holo-rx, 0deg)) rotateY(var(--holo-ry, 0deg));
  transform-style: preserve-3d;
  box-shadow: 0 8px 20px -12px #000b;
}
.tb-holo-card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #26282e;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tb-holo-card__avatar, .tb-holo-card__frame, .tb-holo-card__canvas, .tb-holo-card__foil, .tb-holo-card__initials, .tb-holo-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tb-holo-card__avatar { object-fit: cover; }
.tb-holo-card__art { object-fit: cover; }
.tb-holo-card__shadow { position: absolute; inset: 10% 7% -4%; border-radius: inherit; background: #0007; filter: blur(20px); pointer-events: none; }
.tb-holo-card[data-holo-card-shadow-value="true"] .tb-holo-card__rotor { box-shadow: none; }
.tb-holo-card__sealed-art { position: absolute; inset: 0; display: grid; place-items: center; font-size: 70cqw; opacity: .4; filter: blur(6px); color: #85878d; }
.tb-holo-card__missing { display: grid; place-items: center; height: 100%; font-size: 12px; color: #a0a2a8; }
.tb-holo-card__frame { object-fit: fill; }
.tb-holo-card__initials { display: grid; place-items: center; font-size: 32cqw; font-weight: 900; color: #d5d7dd; }
.tb-holo-card__canvas { opacity: 0; }
.tb-holo-card[data-holo-ready] .tb-holo-card__canvas { opacity: 1; }
.tb-holo-card__foil {
  opacity: .18;
  background: radial-gradient(circle at var(--holo-x, 36%) var(--holo-y, 26%), #fff8, transparent 58%),
    repeating-linear-gradient(120deg, #64e8ff55, #ef8cff55 16%, #ecfc8155 32%, #64e8ff55 48%);
  mix-blend-mode: screen;
}
.tb-holo-card[data-holo-ready] .tb-holo-card__foil { opacity: 0; }
.tb-holo-card__locked {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #34363b, #1e2025);
  box-shadow: inset 0 0 0 1px #a0a0a026;
}
.tb-holo-card__silhouette { position: absolute; inset: 0; filter: blur(6px); opacity: .5; }
.tb-holo-card__silhouette::before { content: ""; position: absolute; width: 32%; height: 32%; top: 16%; left: 34%; border-radius: 50%; background: #85878d; }
.tb-holo-card__silhouette::after { content: ""; position: absolute; width: 76%; height: 50%; bottom: -4%; left: 12%; border-radius: 50% 50% 0 0; background: #85878d; }
.tb-holo-card__lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(16px, 16cqw, 48px); color: #c0c2c8; }
@media (prefers-reduced-motion: reduce) {
  .tb-holo-card__rotor { transform: none; }
  .tb-holo-card__shadow { transform: none !important; }
}