/* Composite geometry and cropping reused from replay_browser/replay-browser.css. */
.fate-composite {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #172019;
}
.fate-composite-card {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 57%;
  overflow: hidden;
}
.fate-composite-card.first {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 77% 100%, 0 100%);
}
.fate-composite-card.second {
  right: 0;
  clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
}
.fate-composite .fate-composite-card img {
  position: absolute;
  top: -42%;
  left: 50%;
  width: 310%;
  max-width: none;
  height: auto;
  border-radius: 0;
  transform: translateX(-50%);
}
.fate-composite-ink {
  position: absolute;
  z-index: 2;
  top: -9%;
  left: 46%;
  width: 10%;
  height: 118%;
  clip-path: polygon(40% 0, 100% 4%, 72% 20%, 91% 38%, 63% 54%, 82% 70%, 44% 87%, 61% 100%, 0 96%, 24% 79%, 8% 61%, 34% 43%, 15% 25%);
  background: linear-gradient(90deg, #2b241d, #060706 42%, #191713 72%, #050606);
  filter: drop-shadow(0 0 1px rgba(238, 223, 184, .48));
  transform: rotate(8deg);
}
.fate-card-crop {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #172019;
}
.fate-card-crop img,
.trait-icon .fate-card-crop img,
.offer-icon .fate-card-crop img,
.selection-icon .fate-card-crop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.08);
}
.hdf-art > .fate-card-crop,
.trait-icon > .fate-card-crop,
.offer-icon > .fate-card-crop {
  position: absolute;
  inset: 2px;
  width: auto;
  height: auto;
}
.hdf-art > .fate-composite,
.trait-icon > .fate-composite,
.offer-icon > .fate-composite {
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
}

.hdf-art{position:relative;display:block;flex:0 0 var(--fate-size,64px);width:var(--fate-size,64px);height:var(--fate-size,64px);border:1px solid #5aa3a0;border-radius:50%;background:#172019;box-shadow:0 3px 8px #0007;overflow:hidden}
.hdf-art>img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.hdf-art .fate-composite-card img{width:310%;height:auto;max-width:none}
.hdf-art .fate-card-crop img{width:100%;height:100%;object-fit:cover}