/* Seraphs & Serpents — full-art card faces (16 Nov 2026).  1 --u = 1 mm of a 63 × 88 mm card.
   Matthew, 15–16 Nov: bright full-art paintings, minimal text; "mystic and realistic"; "use transparency"; "improve the
   design on the line frame"; "the mana and the health and damage is a bit big"; "make the card a bit translucent";
   "can the lines and words be white, like that in mac ios?"
   So: the painting fills the card; white hairline frame with fine corner brackets; white type in the Apple system face
   (SF on Apple devices, Inter elsewhere); frosted-glass panels faked with translucent fills and a white hairline (no
   blur); a small cost stone and slim Strength/Heart pills; deck colour kept only on the cost stone and the deck mark.
   Print-safe on purpose: no CSS blur, no backdrop-filter, no SVG filters, no tiled patterns (they bloat or rasterise the
   press PDF).  Power text stays at about 8 pt for readers over 50.  Everything read sits inside the 3 mm safe zone. */
.fa {
  --u: calc(var(--w, 252px) / 63);
  --f-face: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', 'Alegreya Sans', system-ui, sans-serif;
  --tint: 20, 14, 8;
  --gem1: #FFF4CF; --gem2: #E3BC5C; --gem3: #8A5F14; --mark: #FFE7A3;
  position: relative; width: var(--w, 252px); max-width: 100%; aspect-ratio: 63 / 88; flex: none;
  border-radius: calc(var(--u) * 3.2); overflow: hidden; isolation: isolate;
  background: #0b0a14; color: #fff; text-align: left; text-transform: none; letter-spacing: normal; line-height: normal; font-style: normal;
  font-family: var(--f-face);
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 3) rgba(0, 0, 0, .45);
  -webkit-font-smoothing: antialiased;
}
.fa-deep { --tint: 8, 12, 24; --gem1: #EFE3FF; --gem2: #9C78E8; --gem3: #3B2178; --mark: #BDF3E8; }
.fa-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block }
.fa i { position: absolute; pointer-events: none; font-style: normal }
.fa-glow { inset: 0; z-index: 1;
  background: radial-gradient(120% 60% at 50% 4%, rgba(255, 250, 235, .22) 0%, rgba(255, 250, 235, .06) 40%, rgba(255, 250, 235, 0) 62%) }
.fa-veil-top { inset: 0 0 auto 0; height: 16%; z-index: 1;
  background: linear-gradient(to bottom, rgba(var(--tint), .30) 0%, rgba(var(--tint), 0) 100%) }
.fa-veil-bot { inset: auto 0 0 0; height: 30%; z-index: 1;
  background: linear-gradient(to top, rgba(var(--tint), .42) 0%, rgba(var(--tint), .18) 50%, rgba(var(--tint), 0) 100%) }
.fa-orn { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; display: block }
.fa-sheen { inset: 0; z-index: 6; opacity: 0; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .24) 45%, rgba(255, 255, 255, .1) 52%, transparent 66%);
  background-size: 250% 100%; background-position: 120% 0 }
@media (hover: hover) { .fa.fa-live:hover .fa-sheen { opacity: 1; animation: fa-sheen 1.4s ease-out } }
@keyframes fa-sheen { from { background-position: 120% 0 } to { background-position: -40% 0 } }

/* frosted glass, faked: a dark translucent underlay, a white wash, a white hairline and a bright top edge */
.fa-cost, .fa-head, .fa-panel, .fa-stat, .fa-key, .fa-elder {
  border: calc(var(--u) * .2) solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 calc(var(--u) * .25) 0 rgba(255, 255, 255, .35) }

/* the cost stone: small, a glass gem in the deck's colour, a white number */
.fa-cost { position: absolute; z-index: 4; left: calc(var(--u) * 3.4); top: calc(var(--u) * 3.4);
  width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, var(--gem1) 0 10%, var(--gem2) 48%, var(--gem3) 100%);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: inset 0 calc(var(--u) * .3) 0 rgba(255, 255, 255, .5), 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(0, 0, 0, .4) }
.fa-cost span { font: 700 calc(var(--u) * 4.2) / 1 var(--f-face); color: #fff; letter-spacing: -.02em;
  text-shadow: 0 calc(var(--u) * .25) 0 rgba(0, 0, 0, .45) }

/* the name on a glass plate */
.fa-head { position: absolute; z-index: 4; left: calc(var(--u) * 12.2); right: calc(var(--u) * 3.4); top: calc(var(--u) * 3.4);
  min-height: calc(var(--u) * 7); padding: calc(var(--u) * .9) calc(var(--u) * 6.6) calc(var(--u) * .9) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)), rgba(var(--tint), .34) }
.fa-name { font: 700 calc(var(--u) * 3.7) / 1.08 var(--f-face); letter-spacing: -.01em; color: #fff;
  text-shadow: 0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .55); overflow-wrap: anywhere }
.fa-long .fa-name { font-size: calc(var(--u) * 3.15) }
.fa-xlong .fa-name { font-size: calc(var(--u) * 2.8) }
.fa-group { margin-top: calc(var(--u) * .5); font: 600 calc(var(--u) * 1.9) / 1 var(--f-face);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .82) }
.fa-mark { position: absolute; z-index: 5; right: calc(var(--u) * 4.6); top: calc(var(--u) * 4.6);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); color: var(--mark) }
.fa-mark > svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4) }
.fa-elder { display: flex; align-items: center; gap: calc(var(--u) * .3); margin-top: calc(var(--u) * 1.4);
  font: 700 calc(var(--u) * 2.1) / 1 var(--f-face); color: #fff;
  background: rgba(var(--tint), .4); padding: calc(var(--u) * .45) calc(var(--u) * .8); border-radius: 999px }
.fa-elder svg { width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); color: #fff }

/* the power on a pane of frosted glass */
.fa-panel { position: absolute; z-index: 4; left: calc(var(--u) * 3.6); right: calc(var(--u) * 3.6); bottom: calc(var(--u) * 3.4);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 2.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .05) 100%),
    linear-gradient(180deg, rgba(var(--tint), .46) 0%, rgba(var(--tint), .58) 100%) }
.fa-keys { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7) }
.fa-key { font: 600 calc(var(--u) * 1.95) / 1 var(--f-face); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; padding: calc(var(--u) * .6) calc(var(--u) * 1.2); border-radius: 999px; background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .6); box-shadow: none }
.fa-key-hot { background: rgba(255, 255, 255, .26) }
.fa-power { font: 400 calc(var(--u) * 2.9) / 1.24 var(--f-face); color: #fff;
  text-shadow: 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .65) }
.fa-power b { font-weight: 700; color: #fff }
.fa-dense { font-size: calc(var(--u) * 2.65) }
.fa-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * .2) }
/* Strength and Heart: slim glass pills, lightly tinted, white icon and number */
.fa-stat { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * .5);
  min-width: calc(var(--u) * 8.6); height: calc(var(--u) * 5.4); padding: 0 calc(var(--u) * 1.3); border-radius: 999px; color: #fff }
.fa-stat svg { width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7) }
.fa-stat b { font: 700 calc(var(--u) * 3.6) / 1 var(--f-face); letter-spacing: -.02em; text-shadow: 0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .45) }
.fa-s { background: linear-gradient(180deg, rgba(120, 170, 255, .62), rgba(40, 80, 160, .62)) }
.fa-h { background: linear-gradient(180deg, rgba(255, 120, 110, .62), rgba(170, 40, 34, .62)) }
.fa-ref { flex: 1; text-align: center; font: 500 calc(var(--u) * 2.1) / 1.1 var(--f-face); font-style: italic; color: rgba(255, 255, 255, .9) }
.fa-type { min-width: calc(var(--u) * 8.6) }
.fa-type:empty { visibility: hidden }
.fa-foot { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 1);
  font: 500 calc(var(--u) * 1.85) / 1 var(--f-face); letter-spacing: .02em; color: rgba(255, 255, 255, .8);
  border-top: calc(var(--u) * .15) solid rgba(255, 255, 255, .35); padding-top: calc(var(--u) * .9) }
.fa-foot span:first-child { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fa-foot svg { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); flex: none; color: #fff }
.fa-foot span:last-child { flex: none; opacity: .85 }