/* The full-art Elemon card face (js/dex-show.js face()): the Elemondex grid, the detail card, the fact
   pages and the battle card viewer (js/card-view.js) all link this one sheet, so the card cannot drift.
   Needs --t / --t-ink (the type), --e-font and --e-out on an ancestor. */
/* ---- the full-art card, shared by the Elemondex grid (.card) and this detail card (.foil-in) ----
   .fcard  the thin silver foil frame          .fac  the face: a container, so everything inside sizes in cqi
   .fac-bg the type painting (mirrored/panned per element via --fl/--fx), .fac-art the creature cut-out,
   .fac-top name (left) and number + type coin (right), white with a dark type-tinted stroke. */
.fcard {
  display: block; padding: 2.8%; border-radius: 6.4% / 4.6%; isolation: isolate; color: #fff;
  --t-deep: color-mix(in srgb, var(--t-ink) 72%, #12081f);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.85) 34%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 86%),
    linear-gradient(160deg, hsl(196 70% 86%), hsl(268 55% 88%) 20%, hsl(330 60% 90%) 38%, hsl(46 70% 86%) 56%, hsl(150 45% 85%) 74%, hsl(210 60% 88%)),
    linear-gradient(200deg, #e9ebf0, #8f95a3 24%, #f6f6f8 42%, #858b99 60%, #dfe2e8 78%, #9da2ae);
  background-blend-mode: soft-light, multiply, normal;
  box-shadow: 0 14px 28px -16px rgba(38, 20, 80, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.fac {
  position: relative; display: block; height: 100%; overflow: hidden; border-radius: 4.6% / 3.3%; container-type: inline-size;
  background: var(--t-ink); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--t) 60%, #fff), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.fac-bg { position: absolute; inset: 0; background: var(--fbg) calc(50% + var(--fx, 0%)) 50% / 116% auto no-repeat, var(--t); transform: scaleX(var(--fl, 1)); }
/* the halo: the same painting pre-blurred into bokeh and dulled (img/cardbg/*-s.webp), faded in behind
   the creature so its outline never fights the sharp painting; the edges of the card stay sharp and vivid */
.fac-bg::after {
  content: ""; position: absolute; inset: 0; background: var(--fbs) calc(50% + var(--fx, 0%)) 50% / 116% auto no-repeat;
  -webkit-mask-image: radial-gradient(64% 50% at 50% 60%, #000 52%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
  mask-image: radial-gradient(64% 50% at 50% 60%, #000 52%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
}
/* a soft light behind the creature, a floor shadow under it, and a gentle vignette */
.fac::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(40% 30% at 50% 60%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 72%), radial-gradient(34% 4.5% at 50% 92%, rgba(20, 8, 40, 0.42), rgba(20, 8, 40, 0) 100%); }
.fac::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 9cqi rgba(15, 5, 35, 0.32); }
.fac-art {
  position: absolute; left: 4%; bottom: 4.5%; z-index: 2; width: 92%; height: 80%; object-fit: contain; object-position: 50% 100%;
  /* a thin dark rim in the type's deep tone, then a soft light glow, so pale and dark creatures both read */
  filter: drop-shadow(0 0 0.4cqi color-mix(in srgb, var(--t-deep) 85%, transparent)) drop-shadow(0 0 1.8cqi rgba(255, 255, 255, 0.6)) drop-shadow(0 3cqi 3cqi rgba(20, 8, 40, 0.38));
  transition: transform 0.6s var(--e-out);
}
.fac-top { position: absolute; left: 5%; right: 4%; top: 3.6%; z-index: 4; display: flex; align-items: center; gap: 2cqi; line-height: 1; }
.fac-name, .fac-no {
  font-family: var(--e-font); font-weight: 900; font-style: italic; letter-spacing: -0.01em; color: #fff; white-space: nowrap;
  -webkit-text-stroke: var(--sw) var(--t-deep); paint-order: stroke fill;
  text-shadow: 0 0.6cqi 0 var(--t-deep), 0 1.4cqi 2cqi rgba(10, 4, 25, 0.45);
}
/* the name shrinks with its length (--nl, letters) so the longest (Praseodymium, Rutherfordium) still fit */
.fac-name { flex: 1 1 auto; min-width: 0; font-size: min(11cqi, calc(92cqi / var(--nl, 6))); --sw: min(2.1cqi, calc(17cqi / var(--nl, 6))); padding: 0.4em 0.12em 0.25em 0; }
.fac-no { flex: none; font-size: 8.8cqi; --sw: 1.8cqi; padding-right: 0.06em; }
.fac-h { font-size: 0.62em; margin-right: 0.04em; vertical-align: 0.3em; }
.fac-coin {
  flex: none; display: grid; place-items: center; width: 11.5cqi; height: 11.5cqi; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t) 70%, #fff), var(--t) 52%, var(--t-ink));
  box-shadow: 0 0 0 0.7cqi #fff, 0 0 0 1.2cqi var(--t-deep), 0 1.6cqi 2cqi rgba(10, 4, 25, 0.45), inset 0 -1cqi 1.4cqi rgba(0, 0, 0, 0.22);
}
.fac-ti { width: 66%; height: 66%; stroke-width: 2.4; filter: drop-shadow(0 0.4cqi 0 var(--t-deep)); }
.fac-coin .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }