/* ArcaneFusion card face -- 63 x 88 mm (Pokemon size).
 *
 * Ported from arcane-fusion-card-design/tools/cards/card_design.html (the
 * hand-authored design with six card types, five element palettes, six
 * rarities and the holo treatments). Keep that file as the design source and
 * port changes here; the rules that govern the port:
 *
 * 1. EVERY class and custom property is prefixed `af-`. Bare `.card`, `.name`,
 *    `.stat`, `--gold` collide with Bootstrap in the editor and with
 *    web-game's game.css.
 *
 * 2. Everything the design hung on :root hangs on `.af-card`: the palettes,
 *    data-element / data-element-2 / data-rarity / data-card-type and the
 *    holo attributes. Cards carry their own theme, so a contact sheet, a print
 *    sheet or a game hand can show differently themed cards on one page.
 *
 * 3. Layout is ALWAYS at scale 1. `--af-scale` is a presentation knob for
 *    screen; PNG resolution comes from Chromium's device scale factor.
 *
 * 4. What the design toggled with JavaScript (element icons, type-specific
 *    rows, the extra line under the strip) is decided server-side by
 *    CardView and rendered or omitted by templates/card.php. Only the text
 *    fitting (name and skill box) stays in JavaScript: assets/js/card-fit.js,
 *    which runs in the editor preview, the capture document and the game.
 *
 * 5. The inline SVGs of the design are CSS masks painted with currentColor
 *    (element icons, crown, fusion mark); only the four corner ornaments stay
 *    inline SVG because they use three colours.
 *
 * 6. The frame and the holo are NOT keyed on the rarity. `data-frame`
 *    (gold | element | foil | fullart) and `data-holo-spread` (art | frame |
 *    card, absent = no holo) say what a face looks like; which rarity gets
 *    which is a setting in the editor (Card settings tab), and CardView's
 *    DEFAULT_RARITY_STYLES reproduces the design source's mapping:
 *    common/uncommon gold, rare/epic element, legendary foil + frame holo,
 *    arcane full-art + whole-card holo. Only the footer gem and the Common
 *    name colour still read `data-rarity`, because those ARE the rarity.
 */

/* ================================================================
   EDIT COLOURS HERE
   One block per element. The card picks its element from
   data-element (and data-element-2 for a second element, which
   fades in from the right).
     metal-*      outer border, art frame, gems, ornaments
     title-*      name bar gradient (start = left) and name colour
     glyph        the small triangle / diamond before Active / Passive
     glow-*       glow behind the artwork
     spark-a/b    sparks in the artwork background (r,g,b)
     ground/page  card background / page behind the card (screen only)
     ink-*        rules text, labels, footer
   ================================================================ */
.af-card{
  /* ---- Fire ---- */
  --af-fire-metal-light:#ffd0a0;--af-fire-metal:#e26a2f;--af-fire-metal-dark:#8e2a10;
  --af-fire-title-start:#c8402a;--af-fire-title-mid:#7d2d1c;--af-fire-title-end:#2b1811;
  --af-fire-title-text:#f6dc93;--af-fire-glyph:#f0742c;--af-fire-glow-center:#6a2a14;
  --af-fire-glow-edge:#2e130b;--af-fire-glow-dark:#0a0605;--af-fire-spark-a:240,138,58;
  --af-fire-spark-b:247,227,166;--af-fire-ground:#0f0b09;--af-fire-page:#241a15;
  --af-fire-ink:#f2e7d5;--af-fire-ink-dim:#c9b79c;--af-fire-ink-faint:#9b8b72;
  /* ---- Water ---- */
  --af-water-metal-light:#dceef8;--af-water-metal:#9fc4dc;--af-water-metal-dark:#3f6a85;
  --af-water-title-start:#1f66a8;--af-water-title-mid:#143f6b;--af-water-title-end:#0d2135;
  --af-water-title-text:#e6f4ff;--af-water-glyph:#4fb8ff;--af-water-glow-center:#12406a;
  --af-water-glow-edge:#0a2038;--af-water-glow-dark:#050c14;--af-water-spark-a:108,198,255;
  --af-water-spark-b:223,244,255;--af-water-ground:#090d12;--af-water-page:#131a22;
  --af-water-ink:#e9f1f7;--af-water-ink-dim:#aebfcc;--af-water-ink-faint:#7a8e9c;
  /* ---- Plant ---- */
  --af-plant-metal-light:#e9f4bf;--af-plant-metal:#b3cf62;--af-plant-metal-dark:#4f7c2a;
  --af-plant-title-start:#2f8a3c;--af-plant-title-mid:#1c5326;--af-plant-title-end:#0f2814;
  --af-plant-title-text:#eefad0;--af-plant-glyph:#7fd85a;--af-plant-glow-center:#214f1a;
  --af-plant-glow-edge:#0f2810;--af-plant-glow-dark:#060f06;--af-plant-spark-a:155,227,106;
  --af-plant-spark-b:232,255,176;--af-plant-ground:#0a0f08;--af-plant-page:#151d12;
  --af-plant-ink:#edf3e4;--af-plant-ink-dim:#b5c4a6;--af-plant-ink-faint:#7f9070;
  /* ---- Dark ---- */
  --af-dark-metal-light:#e9ddff;--af-dark-metal:#b79ce6;--af-dark-metal-dark:#5a3d8a;
  --af-dark-title-start:#4f2c8f;--af-dark-title-mid:#2b1854;--af-dark-title-end:#120a24;
  --af-dark-title-text:#efe6ff;--af-dark-glyph:#b48cff;--af-dark-glow-center:#2c1656;
  --af-dark-glow-edge:#140a2a;--af-dark-glow-dark:#07040f;--af-dark-spark-a:180,140,255;
  --af-dark-spark-b:233,220,255;--af-dark-ground:#0a0710;--af-dark-page:#15101f;
  --af-dark-ink:#efe9f7;--af-dark-ink-dim:#b8adc9;--af-dark-ink-faint:#837795;
  /* ---- Light ---- */
  --af-light-metal-light:#eccf72;--af-light-metal:#b8891a;--af-light-metal-dark:#6b4d0e;
  --af-light-title-start:#b8891a;--af-light-title-mid:#6b4d0e;--af-light-title-end:#3a2907;
  --af-light-title-text:#2b1d05;--af-light-glyph:#fff1b8;--af-light-glow-center:#7d6a3a;
  --af-light-glow-edge:#3a3120;--af-light-glow-dark:#121009;--af-light-spark-a:255,246,214;
  --af-light-spark-b:255,255,255;--af-light-ground:#14110a;--af-light-page:#25201a;
  --af-light-ink:#fbf6e6;--af-light-ink-dim:#d3c8a6;--af-light-ink-faint:#9a8d68;
  /* ---- Effect: Spell, Equipment and React. No element, so a neutral pewter and
         slate set that cannot be mistaken for one of the five. The effect artwork is
         strongly coloured on its own, so the frame stays out of its way. ---- */
  --af-effect-metal-light:#dfe5ee;--af-effect-metal:#93a1b8;--af-effect-metal-dark:#4a5468;
  --af-effect-title-start:#46506b;--af-effect-title-mid:#2a3145;--af-effect-title-end:#141822;
  --af-effect-title-text:#eef2f8;--af-effect-glyph:#a8b6cf;--af-effect-glow-center:#2b3244;
  --af-effect-glow-edge:#161b26;--af-effect-glow-dark:#080a0e;--af-effect-spark-a:168,182,207;
  --af-effect-spark-b:226,233,244;--af-effect-ground:#0b0d12;--af-effect-page:#161a22;
  --af-effect-ink:#eef1f6;--af-effect-ink-dim:#b4bccb;--af-effect-ink-faint:#7f8899;
  /* ---- classic gold frame: Common and Uncommon, or data-gold-frame ---- */
  --af-classic-metal-light:#f6dc93;--af-classic-metal:#e2b74a;--af-classic-metal-dark:#9a6a1c;
  /* ---- rarity gem + name (footer, next to the card number) ---- */
  --af-rarity-common:#b8b8b8;--af-rarity-uncommon:#58a85a;--af-rarity-rare:#3a86c8;--af-rarity-epic:#8a5cc8;--af-rarity-legendary:#f2c230;--af-rarity-mythic:#ff7a3d;--af-rarity-arcane:#3ee8d0;--af-rarity-arcane-zenith:#f7f0c8;
  --af-rarity:var(--af-rarity-common);
  /* ---- shared by every element ---- */
  --af-mana:#2fb0d2;
  --af-atk:#ee5b3f;
  --af-hp:#57c98b;
  --af-crystal:#7fd4ff;
  /* ---- artwork fit: contain = whole picture (the cutout artwork is meant to be seen whole),
         cover = fill the frame; zoom enlarges around the centre ---- */
  --af-art-fit:contain;--af-art-zoom:1;
}

/* ---- active element mapping (Fire is the default) ---- */
.af-card{
  --af-metal-light:var(--af-fire-metal-light);
  --af-metal:var(--af-fire-metal);
  --af-metal-dark:var(--af-fire-metal-dark);
  --af-title-start:var(--af-fire-title-start);
  --af-title-mid:var(--af-fire-title-mid);
  --af-title-end:var(--af-fire-title-end);
  --af-title-text:var(--af-fire-title-text);
  --af-glyph:var(--af-fire-glyph);
  --af-glow-center:var(--af-fire-glow-center);
  --af-glow-edge:var(--af-fire-glow-edge);
  --af-glow-dark:var(--af-fire-glow-dark);
  --af-spark-a:var(--af-fire-spark-a);
  --af-spark-b:var(--af-fire-spark-b);
  --af-ground:var(--af-fire-ground);
  --af-page:var(--af-fire-page);
  --af-ink:var(--af-fire-ink);
  --af-ink-dim:var(--af-fire-ink-dim);
  --af-ink-faint:var(--af-fire-ink-faint);
  /* second element defaults to the first (no fade) */
  --af-metal-light-b:var(--af-metal-light);
  --af-metal-b:var(--af-metal);
  --af-metal-dark-b:var(--af-metal-dark);
  --af-title-start-b:var(--af-title-start);
  --af-title-mid-b:var(--af-title-mid);
  --af-title-end-b:var(--af-title-end);
  --af-glow-center-b:var(--af-glow-center);
  --af-glow-edge-b:var(--af-glow-edge);
  --af-spark-a-b:var(--af-spark-a);
  /* derived, no need to edit */
  --af-gold:var(--af-metal);--af-gold-deep:var(--af-metal-dark);--af-gold-pale:var(--af-metal-light);
  --af-foil:linear-gradient(160deg,var(--af-metal-light) 0%,var(--af-metal) 18%,var(--af-metal-dark) 38%,var(--af-metal-light-b) 55%,var(--af-metal-dark-b) 74%,var(--af-metal-light-b) 92%,var(--af-metal-b) 100%);
  --af-line:var(--af-metal-dark);--af-line-dark:var(--af-glow-dark);
  --af-orn-stroke:var(--af-metal);--af-orn-fill:var(--af-metal-light);--af-orn-mid:var(--af-metal-dark);--af-orn-dark:var(--af-glow-dark);
  --af-title-1:var(--af-title-start);--af-title-2:var(--af-title-mid);--af-title-3:var(--af-title-end);--af-title-ink:var(--af-fire-title-text); /* name colour follows rarity only, same for every element */
  --af-flame:var(--af-glyph);
  --af-glow-1:var(--af-glow-center);--af-glow-2:var(--af-glow-edge);--af-glow-3:var(--af-glow-dark);
  --af-mote-a:var(--af-spark-a);--af-mote-b:var(--af-spark-b);
}
.af-card[data-element="water"]{--af-metal-light:var(--af-water-metal-light);--af-metal:var(--af-water-metal);--af-metal-dark:var(--af-water-metal-dark);--af-title-start:var(--af-water-title-start);--af-title-mid:var(--af-water-title-mid);--af-title-end:var(--af-water-title-end);--af-title-text:var(--af-water-title-text);--af-glyph:var(--af-water-glyph);--af-glow-center:var(--af-water-glow-center);--af-glow-edge:var(--af-water-glow-edge);--af-glow-dark:var(--af-water-glow-dark);--af-spark-a:var(--af-water-spark-a);--af-spark-b:var(--af-water-spark-b);--af-ground:var(--af-water-ground);--af-page:var(--af-water-page);--af-ink:var(--af-water-ink);--af-ink-dim:var(--af-water-ink-dim);--af-ink-faint:var(--af-water-ink-faint);}
.af-card[data-element="plant"]{--af-metal-light:var(--af-plant-metal-light);--af-metal:var(--af-plant-metal);--af-metal-dark:var(--af-plant-metal-dark);--af-title-start:var(--af-plant-title-start);--af-title-mid:var(--af-plant-title-mid);--af-title-end:var(--af-plant-title-end);--af-title-text:var(--af-plant-title-text);--af-glyph:var(--af-plant-glyph);--af-glow-center:var(--af-plant-glow-center);--af-glow-edge:var(--af-plant-glow-edge);--af-glow-dark:var(--af-plant-glow-dark);--af-spark-a:var(--af-plant-spark-a);--af-spark-b:var(--af-plant-spark-b);--af-ground:var(--af-plant-ground);--af-page:var(--af-plant-page);--af-ink:var(--af-plant-ink);--af-ink-dim:var(--af-plant-ink-dim);--af-ink-faint:var(--af-plant-ink-faint);}
.af-card[data-element="dark"]{--af-metal-light:var(--af-dark-metal-light);--af-metal:var(--af-dark-metal);--af-metal-dark:var(--af-dark-metal-dark);--af-title-start:var(--af-dark-title-start);--af-title-mid:var(--af-dark-title-mid);--af-title-end:var(--af-dark-title-end);--af-title-text:var(--af-dark-title-text);--af-glyph:var(--af-dark-glyph);--af-glow-center:var(--af-dark-glow-center);--af-glow-edge:var(--af-dark-glow-edge);--af-glow-dark:var(--af-dark-glow-dark);--af-spark-a:var(--af-dark-spark-a);--af-spark-b:var(--af-dark-spark-b);--af-ground:var(--af-dark-ground);--af-page:var(--af-dark-page);--af-ink:var(--af-dark-ink);--af-ink-dim:var(--af-dark-ink-dim);--af-ink-faint:var(--af-dark-ink-faint);}
.af-card[data-element="light"]{--af-metal-light:var(--af-light-metal-light);--af-metal:var(--af-light-metal);--af-metal-dark:var(--af-light-metal-dark);--af-title-start:var(--af-light-title-start);--af-title-mid:var(--af-light-title-mid);--af-title-end:var(--af-light-title-end);--af-title-text:var(--af-light-title-text);--af-glyph:var(--af-light-glyph);--af-glow-center:var(--af-light-glow-center);--af-glow-edge:var(--af-light-glow-edge);--af-glow-dark:var(--af-light-glow-dark);--af-spark-a:var(--af-light-spark-a);--af-spark-b:var(--af-light-spark-b);--af-ground:var(--af-light-ground);--af-page:var(--af-light-page);--af-ink:var(--af-light-ink);--af-ink-dim:var(--af-light-ink-dim);--af-ink-faint:var(--af-light-ink-faint);}
.af-card[data-element-2="fire"]{--af-metal-light-b:var(--af-fire-metal-light);--af-metal-b:var(--af-fire-metal);--af-metal-dark-b:var(--af-fire-metal-dark);--af-title-start-b:var(--af-fire-title-start);--af-title-mid-b:var(--af-fire-title-mid);--af-title-end-b:var(--af-fire-title-end);--af-glow-center-b:var(--af-fire-glow-center);--af-glow-edge-b:var(--af-fire-glow-edge);--af-spark-a-b:var(--af-fire-spark-a);}
.af-card[data-element-2="water"]{--af-metal-light-b:var(--af-water-metal-light);--af-metal-b:var(--af-water-metal);--af-metal-dark-b:var(--af-water-metal-dark);--af-title-start-b:var(--af-water-title-start);--af-title-mid-b:var(--af-water-title-mid);--af-title-end-b:var(--af-water-title-end);--af-glow-center-b:var(--af-water-glow-center);--af-glow-edge-b:var(--af-water-glow-edge);--af-spark-a-b:var(--af-water-spark-a);}
.af-card[data-element-2="plant"]{--af-metal-light-b:var(--af-plant-metal-light);--af-metal-b:var(--af-plant-metal);--af-metal-dark-b:var(--af-plant-metal-dark);--af-title-start-b:var(--af-plant-title-start);--af-title-mid-b:var(--af-plant-title-mid);--af-title-end-b:var(--af-plant-title-end);--af-glow-center-b:var(--af-plant-glow-center);--af-glow-edge-b:var(--af-plant-glow-edge);--af-spark-a-b:var(--af-plant-spark-a);}
.af-card[data-element-2="dark"]{--af-metal-light-b:var(--af-dark-metal-light);--af-metal-b:var(--af-dark-metal);--af-metal-dark-b:var(--af-dark-metal-dark);--af-title-start-b:var(--af-dark-title-start);--af-title-mid-b:var(--af-dark-title-mid);--af-title-end-b:var(--af-dark-title-end);--af-glow-center-b:var(--af-dark-glow-center);--af-glow-edge-b:var(--af-dark-glow-edge);--af-spark-a-b:var(--af-dark-spark-a);}
.af-card[data-element-2="light"]{--af-metal-light-b:var(--af-light-metal-light);--af-metal-b:var(--af-light-metal);--af-metal-dark-b:var(--af-light-metal-dark);--af-title-start-b:var(--af-light-title-start);--af-title-mid-b:var(--af-light-title-mid);--af-title-end-b:var(--af-light-title-end);--af-glow-center-b:var(--af-light-glow-center);--af-glow-edge-b:var(--af-light-glow-edge);--af-spark-a-b:var(--af-light-spark-a);}
/* ---- Spell, Equipment and React carry no element: the effect palette replaces it.
       Placed after the element rules so it wins, and before the gold-frame rule so
       Common and Uncommon still get the gold frame like every other card. ---- */
.af-card[data-card-type="spell"],.af-card[data-card-type="equipment"],.af-card[data-card-type="react"]{
  --af-metal-light:var(--af-effect-metal-light);--af-metal:var(--af-effect-metal);--af-metal-dark:var(--af-effect-metal-dark);
  --af-metal-light-b:var(--af-effect-metal-light);--af-metal-b:var(--af-effect-metal);--af-metal-dark-b:var(--af-effect-metal-dark);
  --af-title-start:var(--af-effect-title-start);--af-title-mid:var(--af-effect-title-mid);--af-title-end:var(--af-effect-title-end);
  --af-title-text:var(--af-effect-title-text);--af-glyph:var(--af-effect-glyph);
  --af-glow-center:var(--af-effect-glow-center);--af-glow-edge:var(--af-effect-glow-edge);--af-glow-dark:var(--af-effect-glow-dark);
  --af-glow-center-b:var(--af-effect-glow-center);--af-glow-edge-b:var(--af-effect-glow-edge);
  --af-spark-a:var(--af-effect-spark-a);--af-spark-b:var(--af-effect-spark-b);--af-spark-a-b:var(--af-effect-spark-a);
  --af-ground:var(--af-effect-ground);--af-page:var(--af-effect-page);
  --af-ink:var(--af-effect-ink);--af-ink-dim:var(--af-effect-ink-dim);--af-ink-faint:var(--af-effect-ink-faint);
}

/* ---- classic gold frame: data-frame="gold" (Common and Uncommon by default), the
       toggle, or a face rendered without a frame attribute at all ---- */
.af-card[data-gold-frame],.af-card:not([data-frame]),.af-card[data-frame="gold"]{
  --af-metal-light:var(--af-classic-metal-light);--af-metal:var(--af-classic-metal);--af-metal-dark:var(--af-classic-metal-dark);
  --af-metal-light-b:var(--af-classic-metal-light);--af-metal-b:var(--af-classic-metal);--af-metal-dark-b:var(--af-classic-metal-dark);
}

/* ---- rarity: gem and name colour in the footer ---- */
.af-card[data-rarity="uncommon"]{--af-rarity:var(--af-rarity-uncommon)}
.af-card[data-rarity="rare"]{--af-rarity:var(--af-rarity-rare)}
.af-card[data-rarity="epic"]{--af-rarity:var(--af-rarity-epic)}
.af-card[data-rarity="legendary"]{--af-rarity:var(--af-rarity-legendary)}
.af-card[data-rarity="mythic"]{--af-rarity:var(--af-rarity-mythic)}
.af-card[data-rarity="arcane"]{--af-rarity:var(--af-rarity-arcane)}
.af-card[data-rarity="arcane-zenith"]{--af-rarity:var(--af-rarity-arcane-zenith)}

/* ---- two-element fade: name bar left→right, glow left/right, sparks mixed ---- */
.af-card[data-element-2] .af-head{
  background:
    linear-gradient(115deg,rgba(255,255,255,.12) 0 30%,transparent 31%),
    linear-gradient(90deg,var(--af-title-start) 0%,var(--af-title-mid) 38%,var(--af-title-mid-b) 62%,var(--af-title-start-b) 100%);
}
.af-card[data-element-2] .af-art-in{
  background:
    radial-gradient(ellipse 52% 62% at 27% 46%,var(--af-glow-center) 0%,transparent 72%),
    radial-gradient(ellipse 52% 62% at 73% 46%,var(--af-glow-center-b) 0%,transparent 72%),
    linear-gradient(90deg,var(--af-glow-edge) 0%,var(--af-glow-dark) 50%,var(--af-glow-edge-b) 100%);
}
.af-card[data-element-2]{--af-mote-b:var(--af-spark-a-b)}

/* ---------- the card: 63 x 88 mm, Pokémon size ---------- */
.af-card{
  /* Presentation-only. Screen consumers scale the card with this (editor
     preview .8, game tooltip .8); capture and print pin it to 1. Resolution
     for PNG comes from Chromium's device scale factor, never from zoom,
     because zoom is applied during layout and would re-break lines. */
  --af-scale:1;
  zoom:var(--af-scale);
  font-family:"Alegreya Sans",Candara,"Segoe UI",system-ui,sans-serif;
  box-sizing:border-box;
  width:63mm;height:88mm;
  border-radius:2.6mm;
  padding:1.9mm;
  position:relative;
  background:var(--af-foil);
  box-shadow:0 .6mm 1.6mm rgba(0,0,0,.6),0 0 0 .1mm var(--af-line-dark);
  color:var(--af-ink);
  overflow:hidden;
}
.af-card *,.af-card *::before,.af-card *::after{box-sizing:border-box}
.af-card::before{ /* fine foil hatching on the gold border */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.14) 0 .18mm,transparent .18mm .7mm);
  mix-blend-mode:soft-light;
}
.af-inner>*{min-width:0} /* one column: without this a long line widens the whole card */
.af-inner{
  position:relative;height:100%;
  border-radius:1.4mm;
  background:var(--af-ground);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
  box-shadow:inset 0 0 0 .2mm var(--af-line),inset 0 0 0 .42mm var(--af-line-dark),inset 0 0 0 .55mm var(--af-gold-pale);
}

/* header */
.af-head{
  display:flex;align-items:center;justify-content:space-between;gap:2mm;
  padding:1.7mm 2.4mm 1.4mm;
  background:
    linear-gradient(115deg,rgba(255,255,255,.12) 0 30%,transparent 31%),
    linear-gradient(90deg,var(--af-title-1) 0%,var(--af-title-2) 55%,var(--af-title-3) 100%);
  border-bottom:.28mm solid var(--af-gold);
  box-shadow:0 .3mm .6mm rgba(0,0,0,.6);
}
.af-name{ /* --af-ns is set by card-fit.js (and pre-estimated by CardView) so the name stays on one line */
  font-family:"Cinzel Decorative",Cinzel,"Trajan Pro",Georgia,serif;font-weight:700;
  font-size:calc(4.3mm*var(--af-ns,1));line-height:1.05;letter-spacing:.03em;white-space:nowrap;min-width:0;
  color:var(--af-title-ink);
  text-shadow:0 .25mm .4mm rgba(0,0,0,.85),0 0 .5mm rgba(0,0,0,.5);
  margin:0;
}
.af-card:not([data-rarity]) .af-name,.af-card[data-rarity="common"] .af-name{ /* Common: plain ivory name, every element */
  color:var(--af-fire-ink);text-shadow:0 .2mm .3mm rgba(0,0,0,.6);
}
/* Foil and full-art frames: foil title, a metallic gold gradient with a slow shine on screen */
.af-card[data-frame="foil"] .af-name,.af-card[data-frame="fullart"] .af-name,.af-card[data-frame="fullart"] .af-plate-name{
  background-image:linear-gradient(110deg,#b8922e 0%,#f6dc93 18%,#fff8dc 32%,#d3ad4e 46%,#fff2bd 60%,#e2b74a 76%,#b8922e 100%);
  background-size:220% 100%;background-position:40% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 .25mm .4mm rgba(0,0,0,.85));
}
.af-cost{
  flex:none;position:relative;width:7.6mm;height:7.6mm;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:linear-gradient(160deg,var(--af-gold-pale),var(--af-gold-deep) 55%,var(--af-gold-pale));
  display:grid;place-items:center;
}
.af-cost i{
  width:calc(100% - .7mm);height:calc(100% - .7mm);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:radial-gradient(circle at 35% 28%,#1f4a52,#061012 75%);
  display:grid;place-items:center;
  font-style:normal;font-family:Cinzel,serif;font-weight:700;font-size:4mm;line-height:1;
  color:var(--af-mana);text-shadow:0 0 .8mm rgba(47,176,210,.8);
}
.af-cost::after{ /* facet highlight */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0 45%,transparent 46%);
  mix-blend-mode:screen;
}

/* art window: chamfered gold frame with ornaments */
.af-art{position:relative;margin:1.5mm 2mm 0;height:37.7mm}
.af-art-gold{
  position:absolute;inset:0;
  clip-path:polygon(2.4mm 0,calc(100% - 2.4mm) 0,100% 2.4mm,100% calc(100% - 2.4mm),calc(100% - 2.4mm) 100%,2.4mm 100%,0 calc(100% - 2.4mm),0 2.4mm);
  background:var(--af-foil);
}
.af-art-gold::after{ /* engraved dark line inside the gold */
  content:"";position:absolute;inset:.42mm;
  clip-path:polygon(2.05mm 0,calc(100% - 2.05mm) 0,100% 2.05mm,100% calc(100% - 2.05mm),calc(100% - 2.05mm) 100%,2.05mm 100%,0 calc(100% - 2.05mm),0 2.05mm);
  background:var(--af-line-dark);
}
.af-art-in{
  position:absolute;inset:.62mm;
  clip-path:polygon(1.9mm 0,calc(100% - 1.9mm) 0,100% 1.9mm,100% calc(100% - 1.9mm),calc(100% - 1.9mm) 100%,1.9mm 100%,0 calc(100% - 1.9mm),0 1.9mm);
  background:radial-gradient(ellipse 60% 62% at 50% 46%,var(--af-glow-1) 0%,var(--af-glow-2) 45%,var(--af-glow-3) 100%);
  box-shadow:inset 0 0 3mm rgba(0,0,0,.85);
  overflow:hidden;
}
.af-motes{ /* faint ember sparks behind the figure */
  position:absolute;inset:0;pointer-events:none;opacity:.8;
  background:
    radial-gradient(circle at 18% 70%,rgba(var(--af-mote-a),.55) 0 .25mm,transparent .45mm),
    radial-gradient(circle at 80% 28%,rgba(var(--af-mote-b),.5) 0 .2mm,transparent .4mm),
    radial-gradient(circle at 70% 78%,rgba(var(--af-mote-a),.45) 0 .2mm,transparent .4mm),
    radial-gradient(circle at 12% 22%,rgba(var(--af-mote-b),.35) 0 .18mm,transparent .38mm),
    radial-gradient(circle at 88% 62%,rgba(var(--af-mote-a),.4) 0 .22mm,transparent .42mm),
    radial-gradient(circle at 30% 40%,rgba(var(--af-mote-b),.3) 0 .15mm,transparent .32mm),
    radial-gradient(circle at 60% 15%,rgba(var(--af-mote-a),.35) 0 .17mm,transparent .35mm);
}
.af-art img{
  position:absolute;left:1.1mm;top:1.1mm;width:calc(100% - 2.2mm);height:calc(100% - 2.2mm);
  object-fit:var(--af-art-fit);object-position:center 50%;transform:scale(var(--af-art-zoom));transform-origin:center;
  display:block;
  filter:drop-shadow(0 0 .9mm rgba(var(--af-mote-a),.35));
}
.af-art .af-placeholder{
  position:absolute;inset:0;display:none;place-items:center;text-align:center;
  color:var(--af-ink-dim);font-size:2.6mm;line-height:1.3;padding:4mm
}
.af-art.is-empty .af-placeholder{display:grid}
.af-art.is-empty img{display:none}
.af-art .af-placeholder b{display:block;color:var(--af-gold);font-family:Cinzel,serif;font-size:3mm;margin-bottom:1mm}
.af-bead{ /* beaded inner ring */
  position:absolute;inset:1.15mm;pointer-events:none;
  border:.3mm dotted var(--af-gold-pale);
  clip-path:polygon(1.5mm 0,calc(100% - 1.5mm) 0,100% 1.5mm,100% calc(100% - 1.5mm),calc(100% - 1.5mm) 100%,1.5mm 100%,0 calc(100% - 1.5mm),0 1.5mm);
  filter:drop-shadow(0 0 .2mm rgba(0,0,0,.9));
}
.af-orn{position:absolute;width:7.2mm;height:7.2mm;pointer-events:none;filter:drop-shadow(0 0 .25mm rgba(0,0,0,.9));display:block;overflow:visible}
.af-orn.tl{top:-.35mm;left:-.35mm}
.af-orn.tr{top:-.35mm;right:-.35mm;transform:scaleX(-1)}
.af-orn.bl{bottom:-.35mm;left:-.35mm;transform:scaleY(-1)}
.af-orn.br{bottom:-.35mm;right:-.35mm;transform:scale(-1)}
.af-fin{ /* diamond finials, top and bottom centre */
  position:absolute;left:50%;width:1.7mm;height:1.7mm;pointer-events:none;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,var(--af-orn-fill),var(--af-orn-mid));
  box-shadow:0 0 0 .18mm var(--af-line-dark),0 0 .4mm rgba(0,0,0,.9);
}
.af-fin.top{top:-.55mm}
.af-fin.bot{bottom:-.55mm}
/* ---- holo sheen: Legendary on the art, Arcane on art + whole card ---- */
.af-holo{ /* holo layer: pre-darkened pattern + colour-dodge blend + light mask. No CSS filter, so headless export renders it */
  position:absolute;inset:0;pointer-events:none;display:none;overflow:hidden;
  --af-mx:50%;--af-my:50%;
  background-image:
    var(--af-sparkle,none),
    repeating-linear-gradient(112deg,
      rgba(128,30,70,.95) 0%,rgba(128,75,20,.95) 5%,rgba(128,115,40,.95) 10%,rgba(45,128,75,.95) 15%,
      rgba(30,110,128,.95) 20%,rgba(70,55,128,.95) 25%,rgba(128,30,70,.95) 30%);
  background-size:20mm 20mm,180% 180%;
  background-position:0 0,var(--af-mx) var(--af-my);
  mix-blend-mode:color-dodge;opacity:.55;
  -webkit-mask-image:radial-gradient(farthest-corner circle at var(--af-mx) var(--af-my),#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.06) 100%);
  mask-image:radial-gradient(farthest-corner circle at var(--af-mx) var(--af-my),#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.06) 100%);
}
.af-holo::after{ /* soft white glint that travels with the light */
  content:"";position:absolute;inset:0;
  background:radial-gradient(farthest-corner circle at var(--af-mx) var(--af-my),rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 18%,transparent 40%);
}
.af-holo-card{border-radius:inherit;opacity:.32;z-index:5}
.af-card[data-holo-full] .af-holo{-webkit-mask-image:none;mask-image:none} /* Full holo: sheen over the whole area, no light falloff */
.af-card[data-holo-full] .af-holo::after{display:none}
.af-card[data-holo-noglint] .af-holo::after{display:none} /* Holo light off: no white glint */
.af-card[data-holo-noglitter] .af-holo{--af-sparkle:none} /* Holo glitter off: no speck texture */
/* Full holo shows the pattern everywhere, so it needs less strength than the lit-spot mode */
.af-card[data-holo-full] .af-holo{opacity:.35}
.af-card[data-holo-full][data-holo-style="cosmos"] .af-holo{opacity:.32}
.af-card[data-holo-full][data-holo-style="silver"] .af-holo{opacity:.38}
.af-card[data-holo-full][data-holo-style="ice"] .af-holo{opacity:.3}
/* Holo spread "frame": the card-level holo shows on the name bar, art frame and outer border only;
   the art interior (has its own layer) and the text block are cut out of the mask. Sizes in card mm. */
.af-card[data-holo-spread="frame"] .af-holo-card{
  display:block;opacity:.4;
  -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);
  -webkit-mask-size:100% 100%,53.96mm 36.46mm,59.2mm 34.04mm;
  -webkit-mask-position:0 0,4.52mm 14.98mm,1.9mm 52.06mm;
  -webkit-mask-repeat:no-repeat;-webkit-mask-composite:xor;
  mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);
  mask-size:100% 100%,53.96mm 36.46mm,59.2mm 34.04mm;
  mask-position:0 0,4.52mm 14.98mm,1.9mm 52.06mm;
  mask-repeat:no-repeat;mask-composite:exclude;
}
.af-card[data-holo-spread="frame"] .af-holo-card::after{display:none}
.af-card[data-holo-spread="frame"] .af-holo-card{opacity:.55}
.af-card[data-holo-spread="frame"][data-holo-full] .af-holo-card{opacity:.5}
.af-card[data-frame="foil"]{box-shadow:0 .6mm 1.6mm rgba(0,0,0,.6),0 0 0 .1mm var(--af-line-dark),inset 0 0 0 .35mm rgba(255,255,255,.18)} /* thin bright rim on the foil border */
/* Full holo: Silver and Element are a single band, so spread them over the whole area */
.af-card[data-holo-full][data-holo-style="silver"] .af-holo{
  background-image:
    var(--af-sparkle,none),
    repeating-linear-gradient(-32deg,rgba(235,235,240,.4) 0 .9mm,transparent .9mm 1.6mm),
    linear-gradient(115deg,rgba(105,107,115,.9) 0%,rgba(140,140,145,.95) 30%,rgba(115,118,125,.95) 50%,rgba(140,140,145,.95) 70%,rgba(105,107,115,.9) 100%);
  background-size:20mm 20mm,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0;
}
.af-card[data-holo-full][data-holo-style="element"] .af-holo{
  background-image:
    var(--af-sparkle,none),
    linear-gradient(115deg,color-mix(in srgb,rgb(var(--af-spark-a)) 62%,#000) 0%,color-mix(in srgb,rgb(var(--af-spark-b)) 62%,#000) 40%,color-mix(in srgb,rgb(var(--af-spark-a-b)) 62%,#000) 75%,color-mix(in srgb,rgb(var(--af-spark-a)) 62%,#000) 100%),
    repeating-linear-gradient(-32deg,rgba(160,160,160,.12) 0 .25mm,transparent .25mm 1.1mm);
  background-size:20mm 20mm,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0;
}
/* Spread is cumulative: "art" lights the artwork, "frame" adds the masked card layer
   above, "card" puts the sheen over the whole face. */
.af-card[data-holo-spread] .af-art-in .af-holo{display:block}
.af-card[data-holo-spread="card"] .af-holo-card{display:block}
.af-card[data-holo-force] .af-art-in .af-holo{display:block} /* Force holo: the selected style on any rarity */

/* ---- holo styles (Rainbow is the base .af-holo above). Colours are pre-darkened; no CSS filters ---- */
.af-card[data-holo-style="cosmos"] .af-holo{ /* scattered glitter discs over a nebula. Screen blend so the discs show on dark areas */
  mix-blend-mode:screen;opacity:.5;
  background-image:
    var(--af-sparkle,none),
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.95) 0 .38mm,transparent .5mm),
    radial-gradient(circle at 62% 12%,rgba(120,240,255,.95) 0 .28mm,transparent .4mm),
    radial-gradient(circle at 84% 48%,rgba(255,170,255,.95) 0 .42mm,transparent .55mm),
    radial-gradient(circle at 38% 58%,rgba(255,250,170,.95) 0 .24mm,transparent .36mm),
    radial-gradient(circle at 10% 80%,rgba(170,255,220,.95) 0 .32mm,transparent .45mm),
    radial-gradient(circle at 70% 84%,rgba(255,255,255,.95) 0 .2mm,transparent .32mm),
    radial-gradient(circle at 48% 32%,rgba(200,180,255,.9) 0 .5mm,transparent .62mm),
    linear-gradient(120deg,rgba(30,20,85,.95) 0%,rgba(0,65,85,.95) 35%,rgba(85,26,66,.95) 65%,rgba(30,20,85,.95) 100%);
  background-size:20mm 20mm,9mm 9mm,9mm 9mm,9mm 9mm,9mm 9mm,9mm 9mm,9mm 9mm,9mm 9mm,220% 220%;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,var(--af-mx) var(--af-my);
}
.af-card[data-holo-style="ice"] .af-holo{ /* cracked ice: angular shards catching light. Screen blend so the shards show on dark areas */
  mix-blend-mode:screen;opacity:.45;
  background-image:
    var(--af-sparkle,none),
    repeating-linear-gradient(62deg,rgba(105,129,140,.9) 0 2.6mm,rgba(66,105,140,.12) 2.6mm 5.4mm,rgba(140,140,140,.95) 5.4mm 6.2mm,rgba(110,132,140,.18) 6.2mm 10.5mm),
    repeating-linear-gradient(-28deg,rgba(140,140,140,.8) 0 .8mm,transparent .8mm 3.8mm,rgba(99,121,140,.55) 3.8mm 6.6mm,transparent 6.6mm 8.9mm),
    linear-gradient(115deg,#467290 0%,#7a868c 50%,#55658c 100%);
  background-size:20mm 20mm,200% 200%,200% 200%,180% 180%;
  background-position:0 0,var(--af-mx) var(--af-my),calc(100% - var(--af-mx)) var(--af-my),var(--af-mx) var(--af-my);
}
.af-card[data-holo-style="silver"] .af-holo{ /* plain metallic sweep, no rainbow. Screen blend so the hatch lines show on dark areas too */
  mix-blend-mode:screen;opacity:.5;
  background-image:
    var(--af-sparkle,none),
    repeating-linear-gradient(-32deg,rgba(235,235,240,.37) 0 .9mm,transparent .9mm 1.6mm),
    linear-gradient(115deg,transparent 0 28%,rgba(160,160,160,.95) 44%,rgba(140,143,150,.95) 50%,rgba(160,160,160,.95) 56%,transparent 72%);
  background-size:20mm 20mm,100% 100%,220% 220%;
  background-position:0 0,0 0,var(--af-mx) var(--af-my);
}
.af-card[data-holo-style="element"] .af-holo{ /* sheen in the card's own element colours */
  background-image:
    var(--af-sparkle,none),
    linear-gradient(115deg,transparent 0 18%,color-mix(in srgb,rgb(var(--af-spark-a)) 62%,#000) 34%,color-mix(in srgb,rgb(var(--af-spark-b)) 62%,#000) 50%,color-mix(in srgb,rgb(var(--af-spark-a-b)) 62%,#000) 66%,transparent 82%),
    repeating-linear-gradient(-32deg,rgba(160,160,160,.12) 0 .25mm,transparent .25mm 1.1mm);
  background-size:20mm 20mm,220% 220%,100% 100%;
  background-position:0 0,var(--af-mx) var(--af-my),0 0;
}

/* ---- Arcane candidates: Aurora, Burst, Mosaic (screen blend) ---- */
.af-card[data-holo-style="aurora"] .af-holo{ /* soft flowing ribbons of teal, violet and magenta */
  mix-blend-mode:screen;opacity:.5;
  background-image:
    var(--af-sparkle,none),
    radial-gradient(ellipse 80% 40% at 20% 30%,rgba(62,232,208,.8),transparent 60%),
    radial-gradient(ellipse 70% 45% at 75% 55%,rgba(140,90,255,.8),transparent 60%),
    radial-gradient(ellipse 60% 35% at 45% 80%,rgba(255,80,200,.7),transparent 60%),
    radial-gradient(ellipse 90% 30% at 60% 15%,rgba(120,200,255,.6),transparent 60%),
    repeating-linear-gradient(100deg,rgba(255,255,255,.08) 0 .4mm,transparent .4mm 2.2mm);
  background-size:20mm 20mm,220% 220%,220% 220%,220% 220%,220% 220%,100% 100%;
  background-position:0 0,var(--af-mx) var(--af-my),calc(100% - var(--af-mx)) var(--af-my),var(--af-mx) calc(100% - var(--af-my)),calc(100% - var(--af-mx)) calc(100% - var(--af-my)),0 0;
}
.af-card[data-holo-style="burst"] .af-holo{ /* rays radiating from the light point */
  mix-blend-mode:screen;opacity:.45;
  background-image:
    var(--af-sparkle,none),
    repeating-conic-gradient(from 0deg at var(--af-mx) var(--af-my),rgba(255,255,255,.55) 0deg 3deg,rgba(120,200,255,.25) 3deg 6deg,transparent 6deg 12deg),
    radial-gradient(circle at var(--af-mx) var(--af-my),rgba(255,255,255,.5),rgba(160,120,255,.3) 30%,transparent 70%);
  background-size:20mm 20mm,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0;
}
.af-card[data-holo-style="mosaic"] .af-holo{ /* faceted glass: small triangular facets with a colour sweep */
  mix-blend-mode:screen;opacity:.45;
  background-image:
    var(--af-sparkle,none),
    repeating-conic-gradient(from 30deg,rgba(255,255,255,.45) 0deg 20deg,rgba(120,220,255,.15) 20deg 60deg,rgba(200,150,255,.35) 60deg 90deg,transparent 90deg 120deg),
    repeating-linear-gradient(60deg,rgba(255,255,255,.35) 0 .3mm,transparent .3mm 5mm),
    repeating-linear-gradient(-60deg,rgba(255,255,255,.35) 0 .3mm,transparent .3mm 5mm),
    repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 .3mm,transparent .3mm 5mm),
    linear-gradient(115deg,rgba(62,232,208,.5),rgba(140,90,255,.5) 50%,rgba(255,120,200,.5));
  background-size:20mm 20mm,5mm 5mm,100% 100%,100% 100%,100% 100%,220% 220%;
  background-position:0 0,0 0,0 0,0 0,0 0,var(--af-mx) var(--af-my);
}
/* ---- five more sheens (2026-09-08). Screen blend so they read on dark art;
   no CSS filters, so a headless capture renders them like the browser does ---- */
.af-card[data-holo-style="prism"] .af-holo{ /* fine vertical rainbow grating, the classic line holo */
  mix-blend-mode:screen;opacity:.45;
  background-image:
    var(--af-sparkle,none),
    repeating-linear-gradient(90deg,
      rgba(255,80,140,.55) 0 .5mm,rgba(255,190,60,.5) .5mm 1mm,rgba(120,230,140,.5) 1mm 1.5mm,
      rgba(80,200,255,.55) 1.5mm 2mm,rgba(160,120,255,.5) 2mm 2.5mm),
    linear-gradient(100deg,transparent 0 25%,rgba(255,255,255,.45) 47%,rgba(255,255,255,.55) 53%,transparent 75%);
  background-size:20mm 20mm,100% 100%,220% 220%;
  background-position:0 0,0 0,var(--af-mx) var(--af-my);
}
.af-card[data-holo-style="confetti"] .af-holo{ /* scattered colour flecks; five tile sizes so the repeat does not read */
  mix-blend-mode:screen;opacity:.5;
  background-image:
    var(--af-sparkle,none),
    radial-gradient(circle at 20% 25%,rgba(255,120,190,.85) 0 .35mm,transparent .5mm),
    radial-gradient(circle at 70% 15%,rgba(255,225,120,.85) 0 .3mm,transparent .45mm),
    radial-gradient(circle at 45% 60%,rgba(120,235,255,.85) 0 .38mm,transparent .52mm),
    radial-gradient(circle at 85% 75%,rgba(170,255,170,.8) 0 .28mm,transparent .42mm),
    radial-gradient(circle at 12% 82%,rgba(190,150,255,.85) 0 .34mm,transparent .48mm),
    linear-gradient(115deg,rgba(60,40,120,.35),rgba(20,80,110,.35) 50%,rgba(110,40,90,.35));
  background-size:20mm 20mm,4.2mm 4.2mm,5.6mm 5.6mm,3.4mm 3.4mm,6.3mm 6.3mm,4.9mm 4.9mm,220% 220%;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,var(--af-mx) var(--af-my);
}
.af-card[data-holo-style="ripple"] .af-holo{ /* concentric rings spreading from the light point */
  mix-blend-mode:screen;opacity:.42;
  background-image:
    var(--af-sparkle,none),
    repeating-radial-gradient(circle at var(--af-mx) var(--af-my),
      rgba(255,255,255,.4) 0 .35mm,transparent .35mm 1.6mm,rgba(130,210,255,.3) 1.6mm 2mm,transparent 2mm 3.4mm),
    radial-gradient(circle at var(--af-mx) var(--af-my),rgba(120,255,235,.45),rgba(70,120,220,.28) 45%,transparent 78%);
  background-size:20mm 20mm,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0;
}
.af-card[data-holo-style="vortex"] .af-holo{ /* a full colour wheel around the light, with coarse spokes over it */
  mix-blend-mode:screen;opacity:.45;
  background-image:
    var(--af-sparkle,none),
    repeating-conic-gradient(from 20deg at var(--af-mx) var(--af-my),rgba(255,255,255,.22) 0deg 6deg,transparent 6deg 24deg),
    conic-gradient(from 0deg at var(--af-mx) var(--af-my),
      rgba(255,90,170,.5),rgba(255,200,90,.45) 18%,rgba(120,240,180,.45) 36%,
      rgba(90,200,255,.5) 54%,rgba(160,110,255,.5) 72%,rgba(255,90,170,.5) 100%),
    radial-gradient(circle at var(--af-mx) var(--af-my),rgba(255,255,255,.4),transparent 55%);
  background-size:20mm 20mm,100% 100%,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0,0 0;
}
.af-card[data-holo-style="scales"] .af-holo{ /* overlapping scallops: two rows of arcs, the second offset by half a tile */
  mix-blend-mode:screen;opacity:.45;
  background-image:
    var(--af-sparkle,none),
    radial-gradient(circle at 50% 100%,transparent 0 1.5mm,rgba(255,255,255,.4) 1.5mm 1.75mm,transparent 1.75mm),
    radial-gradient(circle at 50% 100%,rgba(120,230,255,.28) 0 1.5mm,transparent 1.5mm),
    linear-gradient(115deg,rgba(70,190,180,.45),rgba(120,90,220,.45) 50%,rgba(230,110,180,.45));
  background-size:20mm 20mm,3mm 1.7mm,3mm 1.7mm,220% 220%;
  background-position:0 0,0 0,1.5mm .85mm,var(--af-mx) var(--af-my);
}
.af-card[data-holo-full][data-holo-style="aurora"] .af-holo{opacity:.35}
.af-card[data-holo-full][data-holo-style="burst"] .af-holo{opacity:.3}
.af-card[data-holo-full][data-holo-style="mosaic"] .af-holo{opacity:.3}
.af-card[data-holo-full][data-holo-style="prism"] .af-holo{opacity:.32}
.af-card[data-holo-full][data-holo-style="confetti"] .af-holo{opacity:.34}
.af-card[data-holo-full][data-holo-style="ripple"] .af-holo{opacity:.3}
.af-card[data-holo-full][data-holo-style="vortex"] .af-holo{opacity:.3}
.af-card[data-holo-full][data-holo-style="scales"] .af-holo{opacity:.32}

/* ---- full-art layout: hidden parts, shown only for data-frame="fullart" (Arcane by default) ---- */
.af-fade{display:none;position:absolute;left:0;right:0;bottom:0;height:10mm;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--af-ground) 85%,transparent) 60%,var(--af-ground))}
.af-plate{display:none;position:absolute;left:0;right:0;bottom:0;z-index:2;flex-direction:column;align-items:center;gap:.35mm;padding:0 2mm .9mm}
.af-plate .af-rule{display:flex;align-items:center;gap:.9mm;width:100%}
.af-plate .af-rule i{flex:1;height:.18mm;background:linear-gradient(90deg,transparent,var(--af-gold))}
.af-plate .af-rule i:last-child{background:linear-gradient(90deg,var(--af-gold),transparent)}
.af-plate .af-rule b{ /* the diamond between the two rules */
  width:1.6mm;height:1.6mm;flex:none;transform:rotate(45deg);
  background:var(--af-gold-pale);box-shadow:0 0 0 .22mm var(--af-ground),0 0 0 .42mm var(--af-gold);
}
.af-plate-name{font-family:"Cinzel Decorative",Cinzel,Georgia,serif;font-weight:700;font-size:calc(4.4mm*var(--af-ns,1));line-height:1.05;letter-spacing:.03em;white-space:nowrap;max-width:100%;
  color:var(--af-title-ink);text-align:center;text-shadow:0 0 1.2mm rgba(0,0,0,.9),0 .3mm .5mm rgba(0,0,0,.9)} /* same rarity colour as the title bar, every element */
.af-plate-kind{font-family:"Alegreya Sans SC","Alegreya Sans",serif;font-weight:700;font-size:2.05mm;letter-spacing:.22em;line-height:1;color:var(--af-ink-dim);display:flex;align-items:center;gap:1.2mm}
.af-plate-kind .af-dot{width:.9mm;height:.9mm;background:var(--af-gold);transform:rotate(45deg)}
.af-plate-kind .af-tribe{color:var(--af-gold)}
.af-card[data-frame="fullart"] .af-head,.af-card[data-frame="fullart"] .af-strip{visibility:hidden} /* rows stay, so the text block sits exactly where it does on every other rarity */
.af-card[data-frame="fullart"] .af-art-gold,.af-card[data-frame="fullart"] .af-bead,.af-card[data-frame="fullart"] .af-orn,.af-card[data-frame="fullart"] .af-fin{display:none}
/* the art window bleeds over the hidden name bar (10.96 + 1.5 mm) and strip (3.52 + 1 mm) and out to the inner edges (2 mm) */
.af-card[data-frame="fullart"] .af-art{overflow:visible}
.af-card[data-frame="fullart"] .af-art-in{inset:auto;top:-12.46mm;bottom:-4.52mm;left:-2mm;right:-2mm;clip-path:none;box-shadow:none;
  background:radial-gradient(ellipse 70% 58% at 50% 40%,var(--af-glow-1) 0%,var(--af-glow-2) 48%,var(--af-glow-3) 100%)}
.af-card[data-frame="fullart"][data-element-2] .af-art-in{
  background:
    radial-gradient(ellipse 52% 62% at 27% 42%,var(--af-glow-center) 0%,transparent 72%),
    radial-gradient(ellipse 52% 62% at 73% 42%,var(--af-glow-center-b) 0%,transparent 72%),
    linear-gradient(90deg,var(--af-glow-edge) 0%,var(--af-glow-dark) 50%,var(--af-glow-edge-b) 100%)}
.af-card[data-frame="fullart"] .af-art img{left:1.2mm;top:1mm;width:calc(100% - 2.4mm);height:calc(100% - 10mm);object-position:center 40%}
.af-card[data-frame="fullart"] .af-fade{display:block;bottom:-4.52mm;left:-2mm;right:-2mm}
.af-card[data-frame="fullart"] .af-head .af-cost{visibility:visible;position:relative;z-index:6} /* the header's own gem stays visible over the art, so it can never drift */
.af-card[data-frame="fullart"] .af-plate{display:flex;bottom:-4.52mm;left:-2mm;right:-2mm}
.af-abilities{position:relative}
.af-card[data-frame="fullart"] .af-abilities::before{content:"";position:absolute;left:0;right:0;top:0;height:.16mm;
  background:linear-gradient(90deg,transparent,var(--af-gold-deep) 20%,var(--af-gold) 50%,var(--af-gold-deep) 80%,transparent)}

/* type strip */
.af-strip{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:1mm 2.2mm 0;padding:0 .3mm .35mm;
  border-bottom:.15mm solid var(--af-line);
  font-family:"Alegreya Sans SC","Alegreya Sans",serif;font-weight:700;
  letter-spacing:.12em;font-size:2.3mm;
}
.af-strip>*{min-width:0}
.af-strip .af-kind{color:var(--af-ink)}
.af-kindwrap{display:inline-flex;align-items:center}
.af-elicons{display:inline-flex;align-items:center;gap:.45mm;margin-right:.9mm}
.af-ei{
  display:block;width:2.6mm;height:2.6mm;color:var(--af-glyph);
  filter:drop-shadow(0 0 .15mm rgba(0,0,0,.8));
  background:currentColor;
  -webkit-mask:var(--af-ei-mask) center/contain no-repeat;
          mask:var(--af-ei-mask) center/contain no-repeat;
}
/* the second element's icon takes the second element's spark colour */
.af-ei.is-second{color:rgb(var(--af-spark-a-b))}
.af-ei[data-el="fire"]{--af-ei-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 5.5 5 11a5 5 0 0 1-10 0c0-2 1-3.2 2-4.4.2 1.4.9 2.4 2 2.9C10.6 8.5 11.6 5.4 12 2z'/%3E%3C/svg%3E")}
.af-ei[data-el="water"]{--af-ei-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C9 7 6 10.2 6 14a6 6 0 0 0 12 0c0-3.8-3-7-6-11.5z'/%3E%3C/svg%3E")}
.af-ei[data-el="plant"]{--af-ei-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4c-8 0-13 4-13 11 0 1 .2 2 .5 2.8L4 21.5l1.5 1 3.6-3.6C10 19.6 11 20 12 20c7 0 9-6.5 8-16zM8.6 17.4 15 10l-6.2 8.4z'/%3E%3C/svg%3E")}
.af-ei[data-el="dark"]{--af-ei-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 2.5a9.5 9.5 0 1 0 7 15.5A8 8 0 0 1 14.5 2.5z'/%3E%3C/svg%3E")}
.af-ei[data-el="light"]{--af-ei-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0-6 1.5 3.5h-3L12 1zm0 22-1.5-3.5h3L12 23zM1 12l3.5-1.5v3L1 12zm22 0-3.5 1.5v-3L23 12zM4.2 4.2l3.5 1.4-2.1 2.1-1.4-3.5zm15.6 15.6-3.5-1.4 2.1-2.1 1.4 3.5zM4.2 19.8l1.4-3.5 2.1 2.1-3.5 1.4zM19.8 4.2l-1.4 3.5-2.1-2.1 3.5-1.4z'/%3E%3C/svg%3E")}
.af-strip .af-tribe{color:var(--af-gold);font-weight:500;letter-spacing:.14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* abilities */
.af-abilities{
  --af-s:1; /* auto-fit scale, set by script when text wraps */
  flex:none; /* a flex item would otherwise shrink and hide a wrong --af-ab-h */
  height:var(--af-ab-h,20mm);overflow:hidden;
  padding:calc(.9mm*var(--af-s)) 2.2mm 0;
  display:flex;flex-direction:column;gap:calc(.55mm*var(--af-s));
}
.af-ab{display:grid;grid-template-columns:1fr auto auto;column-gap:1.4mm;align-items:baseline}
.af-ab h2{
  margin:0;
  font-family:Cinzel,serif;font-weight:700;font-size:calc(2.45mm*var(--af-s));line-height:1.15;
  color:var(--af-gold);letter-spacing:.015em;
}
.af-tag{
  display:flex;align-items:center;gap:.8mm;
  font-family:"Alegreya Sans SC","Alegreya Sans",serif;font-weight:700;
  font-size:calc(1.95mm*var(--af-s));letter-spacing:.09em;line-height:1.1;color:var(--af-ink-dim);
}
.af-tag .af-glyph{font-size:calc(1.8mm*var(--af-s));color:var(--af-flame)}
/* Active/passive glyphs. The design used the characters U+25B6 and U+25C6,
   which fall outside both latin font subsets and would resolve to whatever
   system font is installed. Drawn with clip-path instead: deterministic. */
.af-glyph{flex:none;display:inline-block;position:relative;width:1em;line-height:1.1}
.af-glyph::before{content:"\200B"} /* a real text baseline for the inline-block */
.af-glyph::after{content:"";position:absolute;left:0;top:50%;width:1em;height:.82em;transform:translateY(-50%);background:currentColor}
.af-glyph.is-active::after{clip-path:polygon(8% 0,100% 50%,8% 100%)}
.af-glyph.is-passive::after{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.af-tag .af-sub{font-weight:500;color:var(--af-ink-faint);letter-spacing:.1em}
.af-gem{
  display:inline-grid;place-items:center;width:calc(2.9mm*var(--af-s));height:calc(2.9mm*var(--af-s));
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:linear-gradient(160deg,var(--af-gold-pale),var(--af-gold-deep));
}
.af-gem i{
  width:calc(100% - .4mm);height:calc(100% - .4mm);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:radial-gradient(circle at 35% 28%,#1f4a52,#061012 75%);
  display:grid;place-items:center;font-style:normal;
  font-family:Cinzel,serif;font-weight:700;font-size:calc(1.7mm*var(--af-s));line-height:1;color:var(--af-mana);letter-spacing:0
}
.af-count{
  font-family:"Alegreya Sans",sans-serif;font-weight:500;font-size:calc(2.05mm*var(--af-s));
  color:var(--af-ink-dim);letter-spacing:.04em;font-variant-numeric:tabular-nums
}
.af-ab p{
  grid-column:1/-1;margin:calc(.25mm*var(--af-s)) 0 0;
  font-size:calc(2.2mm*var(--af-s));line-height:1.22;color:var(--af-ink);
}
.af-ab p em{font-style:italic;color:var(--af-gold-pale)}
/* Flavour text (the card's description) closes the box. card-fit.js drops it
   before shrinking the rules text below 75%: rules are what the game needs. */
.af-flavour{
  margin:calc(.4mm*var(--af-s)) 0 0;font-size:calc(2.1mm*var(--af-s));line-height:1.2;
  font-style:italic;color:var(--af-ink-dim);
}
.af-flavour.is-dropped{display:none}
/* Skills beyond the fourth are counted rather than squeezed in. */
.af-more{
  align-self:flex-end;margin-top:auto;
  font-family:"Alegreya Sans SC","Alegreya Sans",serif;font-weight:700;
  font-size:1.8mm;letter-spacing:.08em;color:var(--af-gold-deep);
}

/* the lower half: strip, optional subline, text box, footer.
   The footer is pushed to the bottom edge, so "Arcane Fusion", the rarity gem and the
   card number land on exactly the same spot on every card type. Monster is the source:
   every type keeps the same three-column footer and the same 6.4 mm stat row, and the
   hexes a type does not use are hidden rather than removed. */
.af-lower{display:flex;flex-direction:column;min-height:0}

/* footer stats */
.af-stats{
  margin:auto 2.2mm 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-top:.22mm solid var(--af-gold-deep);
  background:linear-gradient(180deg,var(--af-glow-3),var(--af-ground));
  padding:.9mm .3mm .8mm;column-gap:1.5mm;
}
.af-stat{
  display:grid;place-items:center;
  min-width:0;width:13.5mm;height:6.4mm;
  clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
  background:linear-gradient(160deg,var(--af-gold-pale),var(--af-gold-deep) 60%,var(--af-gold-pale));
}
.af-stat.hp{justify-self:end}
.af-stat i{
  width:calc(100% - .5mm);height:calc(100% - .5mm);
  clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
  background:linear-gradient(180deg,var(--af-glow-3),var(--af-ground));
  display:flex;align-items:center;justify-content:center;gap:1mm;
  font-style:normal;font-family:Cinzel,serif;font-weight:700;line-height:1;
}
/* No label in the hex any more -- just the number, which takes the width the word used to. */
.af-stat .af-val{font-size:5mm;font-variant-numeric:tabular-nums}
.af-stat .af-val.wide{font-size:4.6mm}
.af-stat .af-val.wider{font-size:3.8mm}
.af-stat.atk i{color:var(--af-atk);text-shadow:0 0 .8mm rgba(238,91,63,.6)}
.af-stat.hp i{color:var(--af-hp);text-shadow:0 0 .8mm rgba(87,201,139,.6)}

.af-set{
  display:flex;flex-direction:column;align-items:center;gap:.2mm;
  padding:0 1mm;text-align:center;
  font-family:"Alegreya Sans SC","Alegreya Sans",serif;font-size:1.65mm;letter-spacing:.16em;
  color:var(--af-ink-faint);
}
.af-set .af-id{font-variant-numeric:tabular-nums;color:var(--af-ink-dim);letter-spacing:.1em}
.af-set .af-row{display:flex;align-items:center;gap:1.1mm}
.af-rarity{display:inline-flex;align-items:center;filter:drop-shadow(0 0 .12mm var(--af-line-dark))}
.af-rarity i{ /* one gem: colour and shape change with rarity (Common = round) */
  display:block;width:2.6mm;height:2.6mm;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff 0%,var(--af-rarity) 40%,color-mix(in srgb,var(--af-rarity) 55%,#000) 100%);
}
.af-card[data-rarity="uncommon"] .af-rarity i{border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.af-card[data-rarity="rare"] .af-rarity i{border-radius:0;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.af-card[data-rarity="epic"] .af-rarity i{border-radius:0;clip-path:polygon(50% 0,62% 32%,94% 20%,80% 50%,94% 80%,62% 68%,50% 100%,38% 68%,6% 80%,20% 50%,6% 20%,38% 32%)}
.af-card[data-rarity="legendary"] .af-rarity i{border-radius:0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.af-card[data-rarity="arcane"] .af-rarity i{border-radius:0;clip-path:polygon(50% 0,62.5% 28.4%,93.3% 25%,75% 50%,93.3% 75%,62.5% 71.6%,50% 100%,37.5% 71.6%,6.7% 75%,25% 50%,6.7% 25%,37.5% 28.4%)}
.af-card[data-rarity="legendary"] .af-rarity{filter:drop-shadow(0 0 .12mm var(--af-line-dark)) drop-shadow(0 0 .6mm var(--af-rarity))}
.af-card[data-rarity="arcane"] .af-rarity{filter:drop-shadow(0 0 .12mm var(--af-line-dark)) drop-shadow(0 0 .9mm var(--af-rarity))}
.af-set .af-sep{color:var(--af-ink-faint)}


/* ---------- card types ----------
   data-card-type on the card, set by CardView (the editor's `trap` renders
   as `react`). Monster is the default layout.
     fusion     two elements, a fusion mark on the strip, a materials line
     commander  no mana cost and no ATK: crown badge in the header,
                HP alone in the footer, the set block moves to the left
     spell      no ATK/HP and no skill tags; the text box grows into the
                space the stat hexes leave behind
     equipment  ATK/HP become +modifiers, plus an equip restriction line
     react      like spell, plus the trigger line above the text
   --af-ab-h is the height of the text box. The footer is pushed to the bottom by
   .af-lower, so --af-ab-h only decides where the text stops; each type is tuned to
   leave the same ~0.9 mm above the footer that a monster has.
   ------------------------------------------------------------------ */
.af-card[data-card-type="fusion"]{--af-ab-h:16.65mm}
.af-card[data-card-type="equipment"]{--af-ab-h:17.3mm}
/* with the Line field empty the subline collapses, so the text box gets its 3.35 mm
   back: fusion then matches monster, equipment and react match spell */
.af-card[data-no-subline][data-card-type="fusion"]{--af-ab-h:20mm}
.af-card[data-no-subline][data-card-type="equipment"],
.af-card[data-no-subline][data-card-type="react"]{--af-ab-h:20.65mm}
.af-card[data-card-type="react"]{--af-ab-h:17.3mm}
.af-card[data-card-type="spell"]{--af-ab-h:20.65mm}

/* commander: crown badge instead of the mana octagon */
.af-crown{
  display:none;flex:none;position:relative;width:7.6mm;height:7.6mm;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:linear-gradient(160deg,var(--af-gold-pale),var(--af-gold-deep) 55%,var(--af-gold-pale));
  place-items:center;
}
.af-crown i{
  width:calc(100% - .7mm);height:calc(100% - .7mm);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:radial-gradient(circle at 35% 28%,#4b3a12,#140d03 75%);
  display:grid;place-items:center;
}
.af-crown b{
  display:block;width:4.4mm;height:4.4mm;background:var(--af-gold-pale);
  filter:drop-shadow(0 0 .4mm rgba(246,220,147,.6));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5 6.6 11 12 4l5.4 7L21 7.5 19.4 18H4.6L3 7.5zm2.9 12.1h12.2v1.6H5.9v-1.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5 6.6 11 12 4l5.4 7L21 7.5 19.4 18H4.6L3 7.5zm2.9 12.1h12.2v1.6H5.9v-1.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.af-crown::after{ /* same facet highlight as .af-cost */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0 45%,transparent 46%);
  mix-blend-mode:screen;
}
.af-card[data-card-type="commander"] .af-cost{display:none}
.af-card[data-card-type="commander"] .af-crown{display:grid}
.af-card[data-frame="fullart"][data-card-type="commander"] .af-head .af-crown{visibility:visible;position:relative;z-index:6}

/* fusion: a link mark between the two element icons and the type word */
.af-fusemark{
  display:none;width:2.3mm;height:2.3mm;margin-right:.9mm;background:var(--af-gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4 12 12 8 20 4 12 8 4zm8 0 4 8-4 8-4-8 4-8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4 12 12 8 20 4 12 8 4zm8 0 4 8-4 8-4-8 4-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.af-card[data-card-type="fusion"] .af-fusemark{display:block}

/* one line under the strip: fusion materials, equip restriction, react trigger */
.af-subline{
  display:none;align-items:center;gap:1.1mm;min-width:0;
  margin:.7mm 2.2mm 0;min-height:2.4mm;
}
.af-subline .af-lbl{
  flex:none;
  font-family:"Alegreya Sans SC","Alegreya Sans",serif;font-weight:700;
  font-size:1.75mm;letter-spacing:.14em;line-height:1;
  color:var(--af-ground);background:linear-gradient(160deg,var(--af-gold-pale),var(--af-gold-deep));
  padding:.5mm 1mm .4mm;
  clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);
}
.af-subline .af-txt{
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:"Alegreya Sans",sans-serif;font-size:2.05mm;line-height:1.15;
  color:var(--af-ink);letter-spacing:.01em;
}
.af-subline.is-empty{display:none} /* no line text, no row */
.af-card[data-card-type="fusion"] .af-subline,
.af-card[data-card-type="equipment"] .af-subline,
.af-card[data-card-type="react"] .af-subline{display:flex}
.af-card[data-frame="fullart"] .af-subline{visibility:hidden} /* full-art has no strip to hang it under */

/* the three effect types show no element icon: the strip is just the type word */
.af-card[data-card-type="spell"] .af-elicons,
.af-card[data-card-type="equipment"] .af-elicons,
.af-card[data-card-type="react"] .af-elicons{display:none}
.af-card[data-card-type="spell"] .af-plate-kind .af-dot,
.af-card[data-card-type="equipment"] .af-plate-kind .af-dot,
.af-card[data-card-type="react"] .af-plate-kind .af-dot{display:none}

/* spell, equipment and react: no stat hexes. An equipment card can grant far more than
   ATK and HP, so what it gives belongs in the skill text, not in two fixed numbers.
   visibility, not display, so the footer keeps the monster's height and columns */
.af-card[data-card-type="spell"] .af-stat,
.af-card[data-card-type="equipment"] .af-stat,
.af-card[data-card-type="react"] .af-stat{visibility:hidden}
.af-card[data-card-type="spell"] .af-ab .af-tag,.af-card[data-card-type="react"] .af-ab .af-tag,
.af-card[data-card-type="spell"] .af-ab .af-count,.af-card[data-card-type="react"] .af-ab .af-count{display:none}

/* commander: no ATK -- the hex keeps its cell so LIFE and the set block do not move -- and the
   HP hex prints its player's starting life under a LIFE label. Where the crystals shatter is a
   line of its own at the foot of the text box (.af-crystals). */
.af-card[data-card-type="commander"] .af-stat.atk{visibility:hidden}

/* the three life crystals: "26 ◇ | 17 ◇ | 8 ◇", the life total each one shatters at. Sits
   directly under the text box (a sibling of it, never inside -- see card.php), and the
   commander's --af-ab-h below hands it exactly its own height so the footer stays put. */
.af-crystals{
  display:flex;align-items:center;justify-content:center;gap:1.5mm;
  margin:.35mm 2.2mm 0;padding-top:.45mm;
  border-top:.15mm solid var(--af-line);
}
.af-card[data-card-type="commander"]{--af-ab-h:16.4mm}
.af-cb{display:flex;align-items:center;gap:.7mm}
.af-cb b{
  font-family:Cinzel,serif;font-weight:700;font-size:2.6mm;line-height:1;
  color:var(--af-crystal);text-shadow:0 0 .7mm rgba(127,212,255,.5);
  font-variant-numeric:tabular-nums;
}
.af-cb-sep{width:.15mm;height:2.6mm;background:var(--af-line);flex:none}
.af-crystal{
  display:block;flex:none;width:2.5mm;height:2.5mm;background:var(--af-crystal);
  filter:drop-shadow(0 0 .5mm rgba(127,212,255,.55));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 21 9l-9 13.5L3 9l9-7.5zm0 2.6L5.6 9h12.8L12 4.1zM5.8 10.6l4.7 8.1-2.2-8.1H5.8zm6.2 0h-.1l2.3 8.4 2.3-8.4H12z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 21 9l-9 13.5L3 9l9-7.5zm0 2.6L5.6 9h12.8L12 4.1zM5.8 10.6l4.7 8.1-2.2-8.1H5.8zm6.2 0h-.1l2.3 8.4 2.3-8.4H12z'/%3E%3C/svg%3E") center/contain no-repeat;
}