/* Shared by the landing and Mini App. Artwork stays byte-for-byte unchanged. */
.gamecard-wordmark {
  --wordmark-art: url('wordmark-gold.png');
  --wordmark-edge: drop-shadow(0 0 .45px #263347);
  position: relative;
  isolation: isolate;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--wordmark-width, 248px);
  aspect-ratio: 2086 / 365;
  vertical-align: middle;
  line-height: 1;
}

.gamecard-wordmark[data-brand-surface='dark'],
.gamecard-wordmark[data-brand-surface='image'] {
  --wordmark-art: url('wordmark-steel.png');
  --wordmark-edge: none;
}

/* An unframed scrim keeps bright picture details away from the letter edges. */
.gamecard-wordmark[data-brand-surface='image']::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -12px -16px;
  background: radial-gradient(ellipse, #111c2af2 35%, #111c2ac7 60%, #111c2a00 75%);
  pointer-events: none;
}

.gamecard-wordmark__art { position: absolute; inset: 0; overflow: hidden; }
.gamecard-wordmark__art::before {
  content: '';
  position: absolute;
  /* Both 2172 × 724 originals share the same transparent crop window. */
  width: 104.122723%;
  aspect-ratio: 3 / 1;
  left: -2.1572387%;
  top: -49.8630137%;
  background: var(--wordmark-art) center / 100% 100% no-repeat;
  filter: var(--wordmark-edge);
}
.gamecard-wordmark__text { display: none; }

@media (forced-colors: active) {
  .gamecard-wordmark { width: auto; aspect-ratio: auto; }
  .gamecard-wordmark__art, .gamecard-wordmark::before { display: none; }
  .gamecard-wordmark__text {
    display: block;
    color: CanvasText;
    font: 800 24px/1 'Source Sans 3', Arial, sans-serif;
    letter-spacing: -.04em;
  }
}