.game-card__art--starframe {
  background:
    radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--lime) 32%, transparent), transparent 37%),
    color-mix(in srgb, var(--ink) 93%, var(--blue));
}

.game-card__art--starframe::after {
  border-color: color-mix(in srgb, var(--lime) 18%, transparent);
}

.starframe-card-preview {
  position: relative;
  z-index: 1;
  width: 142px;
  height: 116px;
}

.starframe-card-preview__ship {
  position: absolute;
  right: 17px;
  bottom: 3px;
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(4, 28px);
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.25));
}

.starframe-card-preview__ship img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 7px;
}

.starframe-card-preview__ship img:nth-child(1) { grid-area: 1 / 2; }
.starframe-card-preview__ship img:nth-child(2) { grid-area: 2 / 1; }
.starframe-card-preview__ship img:nth-child(3) { grid-area: 2 / 2; }
.starframe-card-preview__ship img:nth-child(4) { grid-area: 2 / 3; }
.starframe-card-preview__ship img:nth-child(5) { grid-area: 3 / 2; }
.starframe-card-preview__ship img:nth-child(6) { grid-area: 4 / 2; }

.starframe-card-preview__enemy {
  position: absolute;
  width: 30px;
  height: 17px;
  background: var(--canvas);
  border: 2px solid var(--blue);
  border-radius: 6px;
}

.starframe-card-preview__enemy::after {
  position: absolute;
  inset: 5px 8px;
  background: var(--ink);
  content: "";
}

.starframe-card-preview__enemy--one { top: 2px; left: 5px; transform: rotate(-7deg); }
.starframe-card-preview__enemy--two { top: 40px; left: 17px; transform: rotate(5deg); }

.starframe-card-preview__shot {
  position: absolute;
  top: 26px;
  left: 62px;
  width: 7px;
  height: 7px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: -19px 16px 0 -1px var(--lime), 20px -17px 0 -1px var(--coral);
}