/* Opt-in presentation cues. A game sets states from its authorized projection;
   these never alter legal actions or replace native disabled/aria-disabled. */
.xg-card {
  --xg-card-legal: #6dba9d;
  --xg-card-warning: #d8ab58;
  --xg-card-winner: #e8c465;
  transition: filter 130ms ease, box-shadow 130ms ease;
}
.xg-card[data-card-selected="true"] {
  box-shadow: 0 0 0 3px var(--xg-card-accent), var(--xg-card-shadow);
}
.xg-card[data-card-targetable="true"]:not([data-card-selected="true"]) {
  box-shadow: 0 0 0 2px var(--xg-card-legal), var(--xg-card-shadow);
}
.xg-card[data-card-legal="true"]:not([data-card-targetable="true"]):not([data-card-selected="true"]) {
  box-shadow: 0 0 0 1px var(--xg-card-legal), var(--xg-card-shadow);
}
.xg-card[data-card-winner="true"] {
  box-shadow: 0 0 0 3px var(--xg-card-winner), 0 0 18px 2px color-mix(in srgb, var(--xg-card-winner) 35%, transparent);
}
.xg-card[data-card-active="true"] {
  border-color: var(--xg-card-accent);
  outline: 1px solid var(--xg-card-accent);
  outline-offset: 2px;
}
.xg-card[data-card-new="true"]::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px dashed var(--xg-card-accent);
  border-radius: calc(var(--xg-card-radius) + 4px);
  pointer-events: none;
}
.xg-card[data-card-exhausted="true"] .xg-card__art,
.xg-card[data-card-unavailable="true"] .xg-card__art { filter: grayscale(.65) brightness(.72); }
.xg-card[data-card-exhausted="true"] .xg-card__face {
  box-shadow: inset 0 0 0 3px var(--xg-card-warning);
}
.xg-card[data-card-owned="true"] { --xg-card-owner-color: var(--xg-card-accent); }
/* States never consume a permanent strip of the card face. Ownership/legality
   symbols belong to an optional game-supplied __markings slot. */
.xg-card:focus-visible, .xg-card:has(:focus-visible) {
  outline: 3px solid var(--xg-card-focus);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .xg-card { transition: none; }
}
@media (forced-colors: active) {
  .xg-card[data-card-selected="true"] { outline: 2px solid Highlight; }
  .xg-card[data-card-targetable="true"] { outline: 2px dotted Highlight; }
  .xg-card[data-card-new="true"]::before { border-color: Highlight; }
}