/* Card Kit face presets. No global poker or card selectors: consumers opt in. */
.xg-card--preset {
  --xg-preset-suit-ink: #26354c;
  --xg-preset-font: Georgia, 'Times New Roman', serif;
  --xg-preset-border: var(--xg-card-border);
}
.xg-card--preset .xg-preset {
  padding: 0;
  display: block;
  font-family: var(--xg-preset-font);
  color: var(--xg-preset-suit-ink);
  pointer-events: none;
}
.xg-card--classic, .xg-card--compact {
  --xg-card-surface: #fffef7;
  --xg-card-ink: #293341;
}
.xg-card--classic .xg-preset, .xg-card--compact .xg-preset { background: var(--xg-card-surface); }
.xg-preset__index {
  position: absolute;
  z-index: 3;
  top: 3%;
  left: 4%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0;
  min-width: 13%;
  font: 800 clamp(12px, 17cqi, 28px)/.92 var(--xg-preset-font);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--xg-preset-suit-ink);
}
.xg-preset__index--bottom { top: auto; left: auto; bottom: 3%; right: 4%; transform: rotate(180deg); }
.xg-preset__index-suit { line-height: 1.1; font-size: .83em; }
.xg-preset__suit-image { display:block; width: 1em; height: 1em; object-fit: contain; }
.xg-preset__poker-center {
  position: absolute;
  display: block;
  inset: 9% 16%;
  box-sizing: border-box;
}
.xg-preset__pips { position: absolute; inset: 0; display: block; }
.xg-preset__pip {
  position: absolute;
  transform: translate(-50%,-50%);
  font-size: clamp(14px, 20cqi, 34px);
  line-height: 1;
  color: var(--xg-preset-suit-ink);
}
.xg-preset__pip.xg-preset__suit-image { width: 25%; height: 17%; }
.xg-card--classic .xg-preset--full-art .xg-preset__poker-center { inset: 0; }
.xg-card--classic .xg-preset--full-art .xg-preset__index { display: none; }
.xg-preset__face-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: var(--xg-preset-face-fit, contain);
  object-position: center;
}
.xg-preset__court {
  position: absolute;
  inset: 2% 4%; display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--xg-preset-suit-ink) 65%, transparent);
  background: repeating-linear-gradient(130deg, transparent 0 7px,
    color-mix(in srgb, var(--xg-preset-suit-ink) 6%, transparent) 7px 8px);
  overflow: hidden;
}
.xg-preset__court-art { position: absolute; width: 94%; height: 94%; }
.xg-preset__robe { fill: var(--xg-preset-suit-ink); opacity: .82; }
.xg-preset__robe-trim { fill: var(--xg-card-surface); opacity: .9; }
.xg-preset__head { fill: #deb98d; stroke: var(--xg-preset-suit-ink); stroke-width: 1.5; }
.xg-preset__crown { fill: #d9ab4c; stroke: var(--xg-preset-suit-ink); stroke-width: 1.6; }
.xg-preset__detail { fill: none; stroke: var(--xg-preset-suit-ink); stroke-width: 2; }
.xg-preset__court-rank {
  position: absolute; inset-inline-start: 6%; inset-block-end: 3%;
  font: 800 clamp(14px, 16cqi, 25px)/1 var(--xg-preset-font);
  color: var(--xg-preset-suit-ink);
  background: var(--xg-card-surface); padding: 1px 4px;
}
.xg-preset__court-suit { position: absolute; inset-inline-end: 6%; inset-block-start: 3%; font-size: clamp(16px, 19cqi, 29px); }
.xg-preset__compact-center { display: none; }
.xg-card--compact .xg-preset__poker-center,
.xg-card--compact .xg-preset__index--bottom { display: none; }
.xg-card--compact .xg-preset__index--top { top: 5%; left: 7%; font-size: clamp(12px, 19cqi, 20px); }
.xg-card--compact .xg-preset__compact-center {
  position: absolute;
  inset: 15% 0 6%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
}
.xg-card--compact .xg-preset__compact-rank {
  color: var(--xg-preset-suit-ink);
  font: 900 clamp(20px, 45cqi, 58px)/.95 var(--xg-preset-font);
}
.xg-card--compact .xg-preset__compact-suit {
  color: var(--xg-preset-suit-ink);
  font-size: clamp(22px, 35cqi, 47px);
  line-height: 1;
}
.xg-card--compact .xg-preset__compact-suit.xg-preset__suit-image { width: 43%; height: 43%; }
.xg-card--glyph {
  --xg-card-surface: #1c4557;
  --xg-preset-suit-ink: #e7faff;
  --xg-preset-rank-ink: #fff;
}
.xg-card--glyph .xg-preset {
  background: var(--xg-preset-background, var(--xg-card-surface));
  color: var(--xg-preset-rank-ink);
}
.xg-card--glyph .xg-preset::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,#0003,transparent 65%,#0003);
  pointer-events: none;
}
.xg-preset__glyph-art {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  position: absolute; inset: 0; filter: brightness(.8);
}
/* Plain: just the oversized emblem—no tile, stroke or backing. */
.xg-preset__glyph-corner {
  position: absolute; top: var(--xg-glyph-corner-inset, 3%); left: var(--xg-glyph-corner-inset, 3%); z-index: 2;
  width: var(--xg-glyph-corner-size, clamp(29px, 34cqi, 52px));
  height: var(--xg-glyph-corner-size, clamp(29px, 34cqi, 52px));
  display: grid; place-items: center;
  border: 0; border-radius: 0; background: transparent;
  color: var(--xg-preset-suit-ink);
}
.xg-preset__glyph-corner--mirror {
  top: auto; left: auto;
  bottom: var(--xg-glyph-corner-inset, 3%); right: var(--xg-glyph-corner-inset, 3%);
  transform: rotate(180deg);
}
.xg-preset__glyph-icon {
  display: grid; place-items: center;
  font: 900 clamp(22px, 31cqi, 48px)/1 var(--xg-preset-font);
  width: 100%; height: 100%;
}
.xg-preset__glyph-icon.xg-preset__suit-image {
  object-fit: contain;
}
.xg-preset__glyph-icon--mask {
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* Badge: the same vivid ink as the frame bleeds into the corner, with a
   high-contrast, solid suit silhouette on top—Deep Signal's treatment. */
.xg-card--glyph[data-glyph-corner-style="badge"] {
  border: var(--xg-glyph-border-width, 4px) solid var(--xg-card-border);
}
/* The face normally inherits the card's rounded clipping corners. That
   clips away the outer tip of a flush badge and exposes the face/background
   beneath it. Square just the corners occupied by a border-connected badge;
   retain the card's normal rounding everywhere else. */
.xg-card--glyph[data-glyph-corner-style="badge"] .xg-card__face {
  border-top-left-radius: 0;
}
.xg-card--glyph[data-glyph-corner-style="badge"]:has(.xg-preset__glyph-corner--mirror) .xg-card__face {
  border-bottom-right-radius: 0;
}
.xg-card--glyph[data-glyph-corner-style="badge"] .xg-preset__glyph-corner {
  top: 0; left: 0;
  width: var(--xg-glyph-corner-size, clamp(20px, 23cqi, 36px));
  height: var(--xg-glyph-corner-size, clamp(20px, 23cqi, 36px));
  border-radius: 0 0 var(--xg-glyph-corner-radius, 4px) 0;
  background: var(--xg-glyph-corner-fill, var(--xg-card-border));
  color: var(--xg-glyph-corner-icon-color, #111e2a);
}
.xg-card--glyph[data-glyph-corner-style="badge"] .xg-preset__glyph-icon {
  width: 86%; height: 86%;
  font-size: clamp(14px, 17cqi, 28px);
}
.xg-card--glyph[data-glyph-corner-style="badge"] .xg-preset__glyph-corner--mirror {
  top: auto; left: auto; bottom: 0; right: 0;
  transform: rotate(180deg);
}
.xg-preset__glyph-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--xg-preset-rank-ink);
  font: 900 clamp(24px, 61cqi, 106px)/1 var(--xg-preset-rank-font,system-ui,sans-serif);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 3px #061c2aaa, 0 0 9px #061c2a99;
}
.xg-card--back .xg-preset {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg,
    var(--xg-card-surface) 0 6px,
    color-mix(in srgb, var(--xg-card-accent) 18%, var(--xg-card-surface)) 6px 9px);
}
.xg-preset__back-art { width:100%; height:100%; object-fit:cover; }
.xg-preset__back-emblem {
  width: 63%; aspect-ratio:1; border: 3px double var(--xg-card-accent);
  background: var(--xg-card-surface); display:grid; place-items:center;
  font: bold clamp(26px, 44cqi, 74px)/1 var(--xg-preset-font);
  color:var(--xg-card-accent); transform:rotate(45deg);
}
@media (forced-colors: active) {
  .xg-preset__court, .xg-card--glyph .xg-preset__glyph-corner { border-color: CanvasText; }
  .xg-card--glyph[data-glyph-corner-style="badge"] .xg-preset__glyph-corner { background: CanvasText; color: Canvas; }
  .xg-preset__glyph-center { color: CanvasText; }
}

/* Optional illustrated effect face (Skybound / Shards / Spirit Island style).
   The game supplies all copy and imagery, plus any pre-rendered detail slots.
   Card Kit only lays it out; no global card rules or clickable controls. */
.xg-card--effect {
  --xg-effect-gap: clamp(3px, 2.1cqi, 8px);
  --xg-effect-padding: clamp(6px, 5cqi, 12px);
  --xg-effect-title-ink: var(--xg-card-ink);
  --xg-effect-accent: var(--xg-card-accent);
}
.xg-card--effect .xg-preset--effect {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--xg-effect-gap);
  block-size: 100%;
  min-inline-size: 0;
  padding: var(--xg-effect-padding);
  overflow: hidden;
  background: var(--xg-card-surface);
  color: var(--xg-card-ink);
  font: 12px/1.3 var(--xg-preset-font);
}
.xg-card--effect .xg-effect__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-inline-size:0;
  gap:4px;
  flex:0 0 auto;
}
.xg-card--effect .xg-effect__title {
  min-inline-size:0;
  overflow-wrap:anywhere;
  flex:1 1 auto;
}
.xg-card--effect .xg-effect__title-text {
  display:block;
  color:var(--xg-effect-title-ink);
  font:800 clamp(12px, 11.2cqi, 19px)/1.15 var(--xg-preset-font);
}
.xg-card--effect .xg-effect__cost {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  box-sizing:border-box;
  min-inline-size:24px;
  min-block-size:24px;
  padding:2px 4px;
  border:1px solid var(--xg-effect-accent);
  border-radius:4px;
  background:color-mix(in srgb,var(--xg-effect-accent) 13%,var(--xg-card-surface));
  color:var(--xg-card-ink);
  font:800 12px/1 var(--xg-preset-font);
}
.xg-card--effect .xg-effect__type {
  flex:0 0 auto;
  min-inline-size:0;
  color:var(--xg-card-muted);
  font:700 12px/1.2 var(--xg-preset-font);
  overflow-wrap:anywhere;
}
.xg-card--effect .xg-effect__art {
  position:relative;
  display:block;
  box-sizing:border-box;
  flex:1 2 38%;
  min-block-size:0;
  max-block-size:48%;
  min-inline-size:0;
  border:1px solid var(--xg-card-border);
  border-radius:3px;
  overflow:hidden;
  background:color-mix(in srgb,var(--xg-card-ink) 8%,var(--xg-card-surface));
}
.xg-card--effect .xg-preset--effect:not(:has(.xg-effect__rules)) .xg-effect__art {
  flex:1 1 auto;
  max-block-size:none;
}
.xg-card--effect .xg-effect__image {
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:var(--xg-effect-art-fit,cover);
  object-position:var(--xg-effect-art-position,center);
}
.xg-card--effect .xg-effect__icons {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  min-block-size:0;
  gap:4px;
  flex:0 0 auto;
}
.xg-card--effect .xg-effect__icon {
  display:grid;
  place-items:center;
  min-inline-size:22px;
  min-block-size:22px;
  box-sizing:border-box;
  padding:2px;
  border-radius:3px;
  border:1px solid color-mix(in srgb,var(--xg-card-ink) 24%,transparent);
  background:color-mix(in srgb,var(--xg-effect-accent) 10%,var(--xg-card-surface));
  font:700 16px/1 var(--xg-preset-font);
  color:var(--xg-card-ink);
}
.xg-card--effect .xg-effect__symbol {
  display:block;
  inline-size:17px;
  block-size:17px;
  object-fit:contain;
}
.xg-card--effect .xg-effect__stats {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.xg-card--effect .xg-effect__stat {
  display:inline-flex;
  gap:3px;
  border:1px solid var(--xg-card-border);
  padding:2px 4px;
  font-size:12px;
  line-height:1.2;
  border-radius:2px;
  overflow-wrap:anywhere;
}
.xg-card--effect .xg-effect__stat-label {color:var(--xg-card-muted);}
.xg-card--effect .xg-effect__stat-value {color:var(--xg-card-ink);font-weight:800;}
.xg-card--effect .xg-effect__rules {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
  flex:0 1 auto;
  min-block-size:0;
  overflow-wrap:anywhere;
  white-space:pre-line;
  font:400 12px/1.3 var(--xg-preset-font);
}
.xg-card--effect .xg-effect__footer {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  flex:0 0 auto;
  min-block-size:0;
  color:var(--xg-card-muted);
  font-size:12px;
  line-height:1.2;
}
.xg-card--effect .xg-effect__tags {display:flex;flex-wrap:wrap;gap:3px;}
.xg-card--effect .xg-effect__tag {
  border:1px solid var(--xg-card-border);
  padding:1px 3px;
  border-radius:2px;
  font-size:12px;
  line-height:1.2;
}
.xg-card--effect .xg-preset--effect[data-effect-layout="dense"] {
  --xg-effect-gap:3px;
  --xg-effect-padding:6px;
}
.xg-card--effect .xg-preset--effect[data-effect-layout="dense"] .xg-effect__art {
  flex:0 2 22%;
  max-block-size:24%;
}
.xg-card--effect .xg-preset--effect[data-effect-layout="dense"] .xg-effect__rules {
  -webkit-line-clamp:6;
  line-clamp:6;
}
/* A 64px miniature shows a legible visual summary, never a 7px rules paragraph.
   Text-only cards keep their first two lines when there is no artwork. */
.xg-card--effect[data-card-variant="mini"] .xg-preset--effect {
  --xg-effect-gap:2px;
  --xg-effect-padding:4px;
}
.xg-card--effect[data-card-variant="mini"] .xg-effect__type,
.xg-card--effect[data-card-variant="mini"] .xg-effect__icons,
.xg-card--effect[data-card-variant="mini"] .xg-effect__stats,
.xg-card--effect[data-card-variant="mini"] .xg-effect__footer {display:none;}
.xg-card--effect[data-card-variant="mini"] .xg-effect__cost {
  min-inline-size:18px;
  min-block-size:18px;
  padding:1px;
}
.xg-card--effect[data-card-variant="mini"] .xg-effect__art {max-block-size:none;}
.xg-card--effect[data-card-variant="mini"]:has(.xg-effect__art) .xg-effect__rules {display:none;}
.xg-card--effect[data-card-variant="mini"]:not(:has(.xg-effect__art)) .xg-effect__rules {
  -webkit-line-clamp:2;
  line-clamp:2;
}
/* Full inspection is the place to read long, translated rules.
   Preserve 12px+ typography and allow scrolling rather than clipping prose. */
.xg-card--effect[data-card-variant="inspection"] .xg-preset--effect {
  --xg-effect-gap:8px;
  --xg-effect-padding:13px;
  font-size:14px;
}
.xg-card--effect[data-card-variant="inspection"] .xg-effect__title-text {font-size:20px;}
.xg-card--effect[data-card-variant="inspection"] .xg-preset--effect .xg-effect__rules {
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  flex:0 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  font-size:14px;
  line-height:1.42;
}
.xg-card--effect[data-card-variant="inspection"] .xg-effect__art {
  flex:1 3 38%;
  max-block-size:42%;
}
@media (prefers-reduced-motion: reduce) {
  .xg-card--effect .xg-effect__image {animation:none;transition:none;}
}
@media (forced-colors: active) {
  .xg-card--effect .xg-effect__cost,
  .xg-card--effect .xg-effect__icon,
  .xg-card--effect .xg-effect__art {border-color:CanvasText;background:Canvas;}
  .xg-card--effect .xg-effect__title-text,
  .xg-card--effect .xg-effect__rules {color:CanvasText;}
}