:root {
  --credit-art-coin-front: url("art/v8/credits/credit-coin-front-v1-512.png");
  --credit-art-coin-pending: url("art/v8/credits/credit-coin-pending-v1-512.png");
  --credit-art-coin-low: url("art/v8/credits/credit-coin-low-v1-512.png");
  --credit-art-coin-ring: url("art/v8/credits/credit-coin-ring-v1-512.png");
  --credit-art-crest-watermark: url("art/v8/credits/credit-crest-watermark-v1-512.png");
  --credit-art-sparkles: url("art/v8/credits/credit-sparkles-v1-512.png");
  --credit-art-corner-tl: url("art/v8/credits/credit-corner-top-left-v1-128.png");
  --credit-art-corner-tr: url("art/v8/credits/credit-corner-top-right-v1-128.png");
  --credit-art-corner-bl: url("art/v8/credits/credit-corner-bottom-left-v1-128.png");
  --credit-art-corner-br: url("art/v8/credits/credit-corner-bottom-right-v1-128.png");
}

.credit-asset-image {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.credit-coin-art {
  --credit-coin-image: var(--credit-art-coin-front);
  aspect-ratio: 1;
  background: var(--credit-coin-image) center / contain no-repeat;
  display: inline-block;
  isolation: isolate;
  position: relative;
  width: min(100%, 22rem);
}

.credit-coin-art[data-state="pending"] {
  --credit-coin-image: var(--credit-art-coin-pending);
}

.credit-coin-art[data-state="low"] {
  --credit-coin-image: var(--credit-art-coin-low);
}

.credit-coin-art[data-ring="true"]::before,
.credit-coin-art[data-sparkles="true"]::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inset: -10%;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.credit-coin-art[data-ring="true"]::before {
  background-image: var(--credit-art-coin-ring);
}

.credit-coin-art[data-sparkles="true"]::after {
  background-image: var(--credit-art-sparkles);
  inset: 55% -20% -18%;
}

.credit-card-art {
  isolation: isolate;
  position: relative;
}

.credit-card-art::before {
  background:
    var(--credit-art-corner-tl) left top / 4.5rem 4.5rem no-repeat,
    var(--credit-art-corner-tr) right top / 4.5rem 4.5rem no-repeat,
    var(--credit-art-corner-bl) left bottom / 4.5rem 4.5rem no-repeat,
    var(--credit-art-corner-br) right bottom / 4.5rem 4.5rem no-repeat;
  content: "";
  inset: 0;
  opacity: .72;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.credit-card-art[data-watermark="true"]::after {
  background: var(--credit-art-crest-watermark) center / contain no-repeat;
  content: "";
  height: min(70%, 20rem);
  opacity: .16;
  pointer-events: none;
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: min(42%, 20rem);
  z-index: -1;
}