/* Shared Card Kit: opt-in frame. Authorization and contents remain game-owned. */
.xg-card {
  --xg-card-width: 168px;
  --xg-card-aspect: 5 / 7;
  --xg-card-radius: 8px;
  --xg-card-border: #b8b3a6;
  --xg-card-surface: #f8f5ec;
  --xg-card-ink: #252c30;
  --xg-card-muted: #575e5d;
  --xg-card-accent: #196956;
  --xg-card-focus: #1679ce;
  --xg-card-shadow: 0 3px 5px #0002, 0 12px 24px #0002;
  position: relative;
  display: block;
  box-sizing: border-box;
  isolation: isolate;
  container-type: inline-size;
  flex: 0 0 auto;
  inline-size: var(--xg-card-width);
  aspect-ratio: var(--xg-card-aspect);
  padding: 0;
  border: 1px solid var(--xg-card-border);
  border-radius: var(--xg-card-radius);
  background: var(--xg-card-surface);
  color: var(--xg-card-ink);
  box-shadow: var(--xg-card-shadow);
  font: inherit;
  text-align: start;
  vertical-align: middle;
}
.xg-card__face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: var(--xg-card-surface);
}
.xg-card__art, .xg-card__content, .xg-card__markings {
  position: absolute;
  inset: 0;
  display: block;
}
.xg-card__art { pointer-events: none; }
.xg-card__art > img, .xg-card__art > svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: var(--xg-card-art-fit, cover);
  object-position: var(--xg-card-art-position, center);
}
.xg-card__content { box-sizing: border-box; padding: var(--xg-card-padding, 12px); }
.xg-card__markings { pointer-events: none; }
.xg-card:focus-visible, .xg-card:has(:focus-visible) {
  outline: 3px solid var(--xg-card-focus);
  outline-offset: 6px;
}
.xg-card[disabled] { cursor: default; }
@media (forced-colors: active) {
  .xg-card { border: 2px solid CanvasText; }
  .xg-card:focus-visible, .xg-card:has(:focus-visible) { outline-color: Highlight; }
}