/* ============================================================
   CURRENCY · VARIATIONS
   Five pivots off "08 · Engraved currency" from Frame Studies.
   Family-locked: classical roman serifs (Cinzel / Playfair /
   Cormorant), cream paper, multi-ring intaglio border, guilloché
   chrome, crosshatched art window, double-rule banner with
   letter-spaced name. Each variant flexes one or two axes —
   ink color, guilloché pattern, border anatomy, or banner.
   ============================================================ */

/* shared baseline for every variant */
.style-currency-greenback,
.style-currency-royalblue,
.style-currency-crimson,
.style-currency-promissory,
.style-currency-specimen,
.style-currency-coupon {
  --card-font: "Playfair Display", "Cormorant Garamond", serif;
  --body-font: "Cormorant Garamond", serif;
  --name-font: "Cinzel", serif;
  --type-font: "Cinzel", serif;
  --card-radius: 2px;
  --border-w: 14px;
}

/* shared art-window treatment: hide stripe placeholder, draw
   intaglio crosshatch behind a centered art label cartouche. */
.style-currency-greenback .art-stripes,
.style-currency-royalblue .art-stripes,
.style-currency-crimson .art-stripes,
.style-currency-promissory .art-stripes,
.style-currency-specimen .art-stripes,
.style-currency-coupon .art-stripes { display: none; }

.style-currency-greenback .art-label,
.style-currency-royalblue .art-label,
.style-currency-crimson .art-label,
.style-currency-promissory .art-label,
.style-currency-specimen .art-label,
.style-currency-coupon .art-label {
  background: var(--art-bg);
  color: var(--border-color);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  letter-spacing: 0.22em;
}

/* ============================================================
   A · GREENBACK
   US-dollar tradition. Forest-green ink on warm cream.
   Concentric-ring guilloché (Treasury seal feel). Quadruple
   thin rule border. Banner: double rule, oval intaglio knot
   to the left of the name.
   ============================================================ */

.style-currency-greenback {
  --card-bg: #f1e6c8;
  --card-fg: #1f2a1c;
  --border-color: #1e5e3a;
  --art-bg: #e6d8b0;
  --rule-color: #1e5e3a;
  --type-color: #1e5e3a;
  --gesture-bg: #f1e6c8;
  --gesture-stroke: #1e5e3a;
}
.style-currency-greenback.pol-enemy    { --socket-mark: #7a1c1c; }
.style-currency-greenback.pol-friendly { --socket-mark: #1e5e3a; }
.style-currency-greenback.pol-neutral  { --socket-mark: #1e5e3a; }

.style-currency-greenback .frame-chrome {
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      rgba(30,94,58,0.10) 0.6px,
      transparent 1.4px,
      transparent 5px),
    repeating-radial-gradient(circle at 12% 88%,
      transparent 0,
      rgba(30,94,58,0.09) 0.5px,
      transparent 1.2px,
      transparent 7px),
    repeating-radial-gradient(circle at 88% 12%,
      transparent 0,
      rgba(30,94,58,0.09) 0.5px,
      transparent 1.2px,
      transparent 7px),
    var(--card-bg);
}
.style-currency-greenback .frame-border {
  border-width: 2px;
  box-shadow:
    inset 0 0 0 3px var(--card-bg),
    inset 0 0 0 4px var(--border-color),
    inset 0 0 0 7px var(--card-bg),
    inset 0 0 0 8px var(--border-color),
    inset 0 0 0 11px var(--card-bg),
    inset 0 0 0 12px var(--border-color);
}
.style-currency-greenback .card-art-wrap {
  border: 1px solid var(--border-color);
  margin: 4px 4px 0;
  background:
    repeating-linear-gradient(45deg,  rgba(30,94,58,0.22) 0 0.6px, transparent 0.6px 3px),
    repeating-linear-gradient(-45deg, rgba(30,94,58,0.22) 0 0.6px, transparent 0.6px 3px),
    var(--art-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.style-currency-greenback .card-name-banner {
  background: transparent;
  color: var(--border-color);
  font-size: 18px;
  letter-spacing: 0.18em;
  border-top: 1px solid var(--border-color);
  border-bottom: 3px double var(--border-color);
  margin: 2px 4px;
}
.style-currency-greenback .card-name-banner::before,
.style-currency-greenback .card-name-banner::after {
  content: "";
  width: 10px; height: 10px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  margin: 0 10px;
  background:
    radial-gradient(circle, transparent 30%, var(--border-color) 30%, var(--border-color) 35%, transparent 35%);
}

/* ============================================================
   B · ROYAL BLUE NOTE
   Bank-of-England tradition. Deep navy on warm white. Wavy
   intersecting guilloché (sine-pattern feel). Heavy single rule
   plus thin inner rule. Banner: scalloped top edge.
   ============================================================ */

.style-currency-royalblue {
  --card-bg: #f4ecd6;
  --card-fg: #11203d;
  --border-color: #1a2c5a;
  --art-bg: #ead9b0;
  --rule-color: #1a2c5a;
  --type-color: #1a2c5a;
  --gesture-bg: #f4ecd6;
  --gesture-stroke: #1a2c5a;
}
.style-currency-royalblue.pol-enemy    { --socket-mark: #7a1c1c; }
.style-currency-royalblue.pol-friendly { --socket-mark: #1a2c5a; }
.style-currency-royalblue.pol-neutral  { --socket-mark: #1a2c5a; }

.style-currency-royalblue .frame-chrome {
  background:
    /* wavy bands */
    repeating-linear-gradient(90deg,
      transparent 0,
      rgba(26,44,90,0.08) 1px,
      transparent 2px,
      transparent 6px),
    repeating-linear-gradient(0deg,
      transparent 0,
      rgba(26,44,90,0.06) 1px,
      transparent 2px,
      transparent 9px),
    /* knot rosettes in opposite corners */
    radial-gradient(circle at 0% 0%,
      rgba(26,44,90,0.18) 0 18px,
      transparent 22px),
    radial-gradient(circle at 100% 100%,
      rgba(26,44,90,0.18) 0 18px,
      transparent 22px),
    var(--card-bg);
}
.style-currency-royalblue .frame-border {
  border-width: 5px;
  box-shadow:
    inset 0 0 0 7px var(--card-bg),
    inset 0 0 0 8px var(--border-color);
}
.style-currency-royalblue .card-art-wrap {
  border: 1px solid var(--border-color);
  margin: 4px 4px 0;
  background:
    repeating-linear-gradient(0deg,  rgba(26,44,90,0.16) 0 0.6px, transparent 0.6px 2.5px),
    repeating-linear-gradient(90deg, rgba(26,44,90,0.12) 0 0.6px, transparent 0.6px 5px),
    var(--art-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.style-currency-royalblue .card-name-banner {
  background: transparent;
  color: var(--border-color);
  font-size: 19px;
  letter-spacing: 0.16em;
  margin: 2px 4px;
  border-bottom: 1px solid var(--border-color);
  /* scalloped top: row of small half-circles */
  position: relative;
}
.style-currency-royalblue .card-name-banner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background:
    radial-gradient(circle at 6px 0, var(--border-color) 3px, transparent 3.5px) 0 0 / 12px 8px repeat-x;
}

/* ============================================================
   C · CRIMSON BOND
   Treasury / share-certificate tradition. Oxblood ink on ivory.
   Vertical fine hatching everywhere — stock-cert feel. Single
   thick rule with corner rosettes. Banner heavy, with paired
   rules above and below + tiny serial-number ticks at edges.
   ============================================================ */

.style-currency-crimson {
  --card-bg: #f7eed8;
  --card-fg: #2a0e0e;
  --border-color: #7a1a1a;
  --art-bg: #ecd9b6;
  --rule-color: #7a1a1a;
  --type-color: #7a1a1a;
  --gesture-bg: #f7eed8;
  --gesture-stroke: #7a1a1a;
}
.style-currency-crimson.pol-enemy    { --socket-mark: #7a1a1a; }
.style-currency-crimson.pol-friendly { --socket-mark: #1c3d6b; }
.style-currency-crimson.pol-neutral  { --socket-mark: #4a2c1a; }

.style-currency-crimson .frame-chrome {
  background:
    /* dense vertical hatching */
    repeating-linear-gradient(90deg,
      transparent 0,
      rgba(122,26,26,0.10) 0.6px,
      transparent 1.4px,
      transparent 3.5px),
    /* corner rosettes */
    radial-gradient(circle at 8% 7%,
      rgba(122,26,26,0.22) 0 12px,
      transparent 14px),
    radial-gradient(circle at 92% 7%,
      rgba(122,26,26,0.22) 0 12px,
      transparent 14px),
    radial-gradient(circle at 8% 93%,
      rgba(122,26,26,0.22) 0 12px,
      transparent 14px),
    radial-gradient(circle at 92% 93%,
      rgba(122,26,26,0.22) 0 12px,
      transparent 14px),
    var(--card-bg);
}
.style-currency-crimson .frame-border {
  border-width: 7px;
  box-shadow:
    inset 0 0 0 9px var(--card-bg),
    inset 0 0 0 10px var(--border-color);
}
.style-currency-crimson .card-art-wrap {
  border: 1px solid var(--border-color);
  margin: 4px 4px 0;
  background:
    repeating-linear-gradient(90deg, rgba(122,26,26,0.22) 0 0.6px, transparent 0.6px 2.4px),
    var(--art-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.style-currency-crimson .card-name-banner {
  background: transparent;
  color: var(--border-color);
  font-size: 20px;
  letter-spacing: 0.2em;
  margin: 2px 4px;
  border-top: 3px double var(--border-color);
  border-bottom: 3px double var(--border-color);
  position: relative;
}
/* tiny ticks at banner edges, suggesting a serial number gutter */
.style-currency-crimson .card-name-banner::before,
.style-currency-crimson .card-name-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 6px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(90deg,
      var(--border-color) 0 1px,
      transparent 1px 4px);
}
.style-currency-crimson .card-name-banner::before { left: 4px; }
.style-currency-crimson .card-name-banner::after  { right: 4px; }

/* ============================================================
   D · MONO PROMISSORY
   18th-century promissory note. Pure black on cream. No color
   polarity in the chrome. Minimal guilloché, mostly clean paper.
   Quadruple-rule border. Banner: single rule top + bottom, very
   wide letter-spacing.
   ============================================================ */

.style-currency-promissory {
  --card-bg: #f1e7cc;
  --card-fg: #0a0a0a;
  --border-color: #0a0a0a;
  --art-bg: #ead9b0;
  --rule-color: #0a0a0a;
  --type-color: #0a0a0a;
  --gesture-bg: #f1e7cc;
  --gesture-stroke: #0a0a0a;
}
.style-currency-promissory.pol-enemy    { --socket-mark: #0a0a0a; }
.style-currency-promissory.pol-friendly { --socket-mark: #0a0a0a; }
.style-currency-promissory.pol-neutral  { --socket-mark: #0a0a0a; }

.style-currency-promissory .frame-chrome {
  background:
    /* very subtle paper grain */
    repeating-linear-gradient(35deg,
      transparent 0,
      rgba(10,10,10,0.04) 0.4px,
      transparent 0.8px,
      transparent 5px),
    var(--card-bg);
}
.style-currency-promissory .frame-border {
  border-width: 1.5px;
  box-shadow:
    inset 0 0 0 3px var(--card-bg),
    inset 0 0 0 4px var(--border-color),
    inset 0 0 0 7px var(--card-bg),
    inset 0 0 0 8px var(--border-color),
    inset 0 0 0 9px var(--card-bg),
    inset 0 0 0 10px var(--border-color);
}
.style-currency-promissory .card-art-wrap {
  border: 1px solid var(--border-color);
  margin: 4px 4px 0;
  background:
    repeating-linear-gradient(45deg,  rgba(10,10,10,0.18) 0 0.5px, transparent 0.5px 4px),
    repeating-linear-gradient(-45deg, rgba(10,10,10,0.14) 0 0.5px, transparent 0.5px 6px),
    var(--art-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.style-currency-promissory .card-name-banner {
  background: transparent;
  color: var(--border-color);
  font-size: 17px;
  letter-spacing: 0.32em;
  margin: 2px 4px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* ============================================================
   E · SPECIMEN
   Palette inverse — bank-specimen / proof-print feel. Dark plate
   paper, cream ink (so "border" prints as cream on dark). Diagonal
   SPECIMEN watermark across the art window via gigantic letter-
   spaced text. Banner: cream on dark with double rule.
   ============================================================ */

.style-currency-specimen {
  --card-bg: #2a1d12;
  --card-fg: #ecd9b6;
  --border-color: #ecd9b6;
  --art-bg: #2a1d12;
  --rule-color: #ecd9b6;
  --type-color: #ecd9b6;
  --gesture-bg: #2a1d12;
  --gesture-stroke: #ecd9b6;
}
.style-currency-specimen.pol-enemy    { --socket-mark: #e08a8a; }
.style-currency-specimen.pol-friendly { --socket-mark: #9ab8e0; }
.style-currency-specimen.pol-neutral  { --socket-mark: #ecd9b6; }

.style-currency-specimen .frame-chrome {
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      rgba(236,217,182,0.10) 0.6px,
      transparent 1.4px,
      transparent 7px),
    repeating-linear-gradient(20deg,
      transparent 0,
      rgba(236,217,182,0.05) 0.4px,
      transparent 0.8px,
      transparent 4px),
    var(--card-bg);
}
.style-currency-specimen .frame-border {
  border-width: 2px;
  box-shadow:
    inset 0 0 0 4px var(--card-bg),
    inset 0 0 0 5px var(--border-color),
    inset 0 0 0 8px var(--card-bg),
    inset 0 0 0 9px var(--border-color);
}
.style-currency-specimen .card-art-wrap {
  border: 1px solid var(--border-color);
  margin: 4px 4px 0;
  background:
    repeating-linear-gradient(45deg,  rgba(236,217,182,0.18) 0 0.6px, transparent 0.6px 3px),
    repeating-linear-gradient(-45deg, rgba(236,217,182,0.10) 0 0.6px, transparent 0.6px 5px),
    var(--art-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.style-currency-specimen .card-art-wrap::before {
  /* SPECIMEN diagonal overprint */
  content: "SPECIMEN";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) rotate(-22deg);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.32em;
  color: rgba(236,217,182,0.16);
  white-space: nowrap;
  pointer-events: none;
}
.style-currency-specimen .card-name-banner {
  background: transparent;
  color: var(--border-color);
  font-size: 18px;
  letter-spacing: 0.18em;
  border-top: 1px solid var(--border-color);
  border-bottom: 3px double var(--border-color);
  margin: 2px 4px;
}
/* invert gesture glyph fill so it reads on dark paper */
.style-currency-specimen .gesture-glyph { background: var(--card-bg); color: var(--border-color); }

/* ============================================================
   F · COUPON
   Bond-coupon tradition. Ochre ink on tan paper. Diagonal-lattice
   guilloché. Border ring with perforation row (dashed). Banner
   has tear-line dashes top & bottom, denomination feel.
   ============================================================ */

.style-currency-coupon {
  --card-bg: #ead2a0;
  --card-fg: #2b1d08;
  --border-color: #6a4a18;
  --art-bg: #d8b977;
  --rule-color: #6a4a18;
  --type-color: #6a4a18;
  --gesture-bg: #ead2a0;
  --gesture-stroke: #6a4a18;
}
.style-currency-coupon.pol-enemy    { --socket-mark: #7a1c1c; }
.style-currency-coupon.pol-friendly { --socket-mark: #1c3d6b; }
.style-currency-coupon.pol-neutral  { --socket-mark: #6a4a18; }

.style-currency-coupon .frame-chrome {
  background:
    repeating-linear-gradient(45deg,
      transparent 0,
      rgba(106,74,24,0.10) 0.6px,
      transparent 1.4px,
      transparent 6px),
    repeating-linear-gradient(-45deg,
      transparent 0,
      rgba(106,74,24,0.08) 0.6px,
      transparent 1.4px,
      transparent 9px),
    var(--card-bg);
}
.style-currency-coupon .frame-border {
  border-width: 3px;
  border-style: solid;
  box-shadow:
    inset 0 0 0 5px var(--card-bg),
    inset 0 0 0 6px var(--border-color),
    inset 0 0 0 8px var(--card-bg),
    /* dashed perforation ring */
    inset 0 0 0 9px transparent;
}
/* dashed perforation row via an extra layer on .frame-chrome */
.style-currency-coupon .frame-chrome::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px dashed var(--border-color);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.7;
}
.style-currency-coupon .card-art-wrap {
  border: 1px solid var(--border-color);
  margin: 4px 4px 0;
  background:
    repeating-linear-gradient(60deg,  rgba(106,74,24,0.22) 0 0.6px, transparent 0.6px 3.5px),
    repeating-linear-gradient(-60deg, rgba(106,74,24,0.18) 0 0.6px, transparent 0.6px 5px),
    var(--art-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.style-currency-coupon .card-name-banner {
  background: transparent;
  color: var(--border-color);
  font-size: 18px;
  letter-spacing: 0.2em;
  margin: 2px 4px;
  border-top: 1.5px dashed var(--border-color);
  border-bottom: 1.5px dashed var(--border-color);
  position: relative;
}
/* tiny denomination marks at banner ends */
.style-currency-coupon .card-name-banner::before,
.style-currency-coupon .card-name-banner::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--border-color);
  letter-spacing: 0;
}
.style-currency-coupon .card-name-banner::before { left: 8px; }
.style-currency-coupon .card-name-banner::after  { right: 8px; }

/* ============================================================
   Z-ORDER ASSET ISOLATION
   When a card is rendered for the asset library (one z-layer at
   a time on a transparent backdrop), strip the card-bg fill so
   only the rendered layer's pixels are visible.
   ============================================================ */

.card.iso-transparent { background: transparent !important; }
.card.iso-transparent .frame-chrome { background-color: transparent !important; }

/* ============================================================
   PER-LAYER OVERRIDES — L1 plain · L3 ornate
   Per visual-design-cards.md §"Layer encoded via border treatment":
     L1 = plain frame, minimal decoration, no sockets
     L2 = 8-socket ring (default in card.jsx)
     L3 = ornate flowy decoration, non-fantasy, no sockets
   ============================================================ */

/* ---------- L1: strip ornament across all variants ---------- */

.style-currency-promissory.layer-L1 .frame-chrome,
.style-currency-specimen.layer-L1 .frame-chrome,
.style-currency-coupon.layer-L1 .frame-chrome {
  background: var(--card-bg);
}
.style-currency-coupon.layer-L1 .frame-chrome::after { display: none; }
.style-currency-specimen.layer-L1 .card-art-wrap::before { display: none; }

.style-currency-promissory.layer-L1 .frame-border {
  border-width: 2px;
  box-shadow: inset 0 0 0 3px var(--card-bg), inset 0 0 0 4px var(--border-color);
}
.style-currency-specimen.layer-L1 .frame-border {
  border-width: 3px;
  box-shadow: none;
}
.style-currency-coupon.layer-L1 .frame-border {
  border-width: 3px;
  box-shadow: inset 0 0 0 5px var(--card-bg), inset 0 0 0 6px var(--border-color);
}

/* simplify art-window hatch on L1 — single-direction crosshatch only */
.style-currency-promissory.layer-L1 .card-art-wrap {
  background:
    repeating-linear-gradient(45deg, rgba(10,10,10,0.16) 0 0.5px, transparent 0.5px 5px),
    var(--art-bg);
}
.style-currency-specimen.layer-L1 .card-art-wrap {
  background:
    repeating-linear-gradient(45deg, rgba(236,217,182,0.16) 0 0.5px, transparent 0.5px 5px),
    var(--art-bg);
}
.style-currency-coupon.layer-L1 .card-art-wrap {
  background:
    repeating-linear-gradient(45deg, rgba(106,74,24,0.18) 0 0.5px, transparent 0.5px 5px),
    var(--art-bg);
}

/* ---------- L3: ornate flowy decoration ---------- */
/* Add: more border rings, corner medallions, denser chrome.
   No sockets are rendered by card.jsx for L3, but we elaborate
   the chrome and add geometric-curvilinear ornament. */

/* D · Mono Promissory L3 — heavy filigree, 8-line stepped border */
.style-currency-promissory.layer-L3 .frame-border {
  border-width: 2px;
  box-shadow:
    inset 0 0 0 3px var(--card-bg),
    inset 0 0 0 4px var(--border-color),
    inset 0 0 0 6px var(--card-bg),
    inset 0 0 0 7px var(--border-color),
    inset 0 0 0 10px var(--card-bg),
    inset 0 0 0 12px var(--border-color),
    inset 0 0 0 14px var(--card-bg),
    inset 0 0 0 15px var(--border-color);
}
.style-currency-promissory.layer-L3 .frame-chrome {
  background:
    /* four corner ring-medallions */
    radial-gradient(circle at 22px 22px,
      rgba(10,10,10,0.65) 0 3px,
      transparent 4px,
      rgba(10,10,10,0.35) 7px 8px,
      transparent 9px),
    radial-gradient(circle at calc(100% - 22px) 22px,
      rgba(10,10,10,0.65) 0 3px,
      transparent 4px,
      rgba(10,10,10,0.35) 7px 8px,
      transparent 9px),
    radial-gradient(circle at 22px calc(100% - 22px),
      rgba(10,10,10,0.65) 0 3px,
      transparent 4px,
      rgba(10,10,10,0.35) 7px 8px,
      transparent 9px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 22px),
      rgba(10,10,10,0.65) 0 3px,
      transparent 4px,
      rgba(10,10,10,0.35) 7px 8px,
      transparent 9px),
    repeating-linear-gradient(35deg,
      transparent 0,
      rgba(10,10,10,0.05) 0.4px,
      transparent 0.8px,
      transparent 5px),
    var(--card-bg);
}

/* ============================================================
   L3 · GRISAILLE STAINED-GLASS  — the L3 rework (design-references/
   "L3 design rework (June 15th).html"). L3 always maps to the
   specimen variant (card-face.ts LAYER_VARIANT), so this is scoped
   to .style-currency-specimen.layer-L3 only: it overrides the dark
   proof-plate into a silvery leaded stained-glass panel — slate
   came border with twin gold fillet rings, a pale-blue quarry-glass
   art window under a raking glare, silver came seals (gesture +
   lead glyph), and a silver banner with a gold top rule. Specimen
   L1/L2 (gallery-only) and every other style are untouched. Visual
   restyle only — same DOM, same data fields rendered.
   ============================================================ */

.style-currency-specimen.layer-L3 {
  --chrome-a: #b8cad8;
  --chrome-b: #8ca3b6;
  --lead: #46596a;
  --fillet: #c7ad66;
  --fillet2: #8a7a40;
  --banner-a: #b3c5d4;
  --banner-b: #91a8ba;
  --banner-fg: #4a3d16;
  --banner-rule: #bca65e;
  --gris-type: #574818;
  --gris-rule: #a8924e;
  --gris-ico: #5e7c92;
  --gris-body: #22303d; /* was #33485a — darkened for glass-field contrast (#15) */

  --border-w: 12px;
  --card-radius: 6px;
  color: var(--gris-type);
  background:
    radial-gradient(ellipse at 50% 0%, var(--chrome-a) 0%, var(--chrome-b) 72%),
    var(--chrome-b);
}

/* The came border (frame-border, z=3) must sit OVER the edge-to-edge art window
   (card-inner, z=1) so the gold fillet rings read on top of the glass. .frame-wrap
   sets z-index:0 for the L2 socket-mask, which traps frame-border in its own
   stacking context below card-inner; L3 has no mask, so drop that context. */
.style-currency-specimen.layer-L3 .frame-wrap { z-index: auto; }

/* came border: slate lead band + twin gold fillet rings + inner gloom */
.style-currency-specimen.layer-L3 .frame-border {
  border: var(--border-w) solid var(--lead);
  box-shadow:
    inset 0 0 0 2px var(--fillet),
    inset 0 0 0 3px var(--fillet2),
    inset 0 0 14px rgba(0,0,0,0.45);
}

/* chrome layer carries only the faint diagonal quarry lattice over the
   silver field on .card (the mockup's .gx-chrome::before, opacity 0.2). */
.style-currency-specimen.layer-L3 .frame-chrome {
  opacity: 0.2;
  background:
    linear-gradient(45deg, transparent 48%, rgba(0,0,0,0.4) 49%, rgba(0,0,0,0.4) 51%, transparent 52%) 0 0 / 24px 24px,
    linear-gradient(-45deg, transparent 48%, rgba(0,0,0,0.4) 49%, rgba(0,0,0,0.4) 51%, transparent 52%) 0 0 / 24px 24px;
}
/* drop the specimen intaglio extra layer if present */
.style-currency-specimen.layer-L3 .frame-chrome::after { display: none; }

/* art window: pale grisaille glass with a 40px leaded quarry lattice */
.style-currency-specimen.layer-L3 .card-art-wrap {
  flex: 0 0 42%;
  margin: 0;
  border: none;
  position: relative;
  background:
    repeating-linear-gradient(45deg,  rgba(108,128,146,0.5) 0 1.3px, transparent 1.3px 40px),
    repeating-linear-gradient(-45deg, rgba(108,128,146,0.5) 0 1.3px, transparent 1.3px 40px),
    linear-gradient(180deg, #e6f0f7 0%, #c2d4e2 60%, #a4bccf 100%);
}
/* L3 has no SPECIMEN watermark — that overprint is L2-only */
.style-currency-specimen.layer-L3 .card-art-wrap::before { display: none; }
/* raking glare across the glass */
.style-currency-specimen.layer-L3 .card-art-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.4;
  background: linear-gradient(116deg, transparent 34%, rgba(255,255,255,0.22) 43%, transparent 51%);
}

/* art label → pale silver-stain plate pinned to the foot of the glass */
.style-currency-specimen.layer-L3 .art-label {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", "Space Mono", monospace;
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a3d16;
  background: rgba(232,238,243,0.78);
  border: 1px solid rgba(188,166,94,0.7);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

/* gesture badge → round silver came seal, top-left of the glass */
.style-currency-specimen.layer-L3 .gesture-glyph {
  top: 7px;
  left: 7px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  padding: 5px;
  color: #5a4a1e;
  background: radial-gradient(circle at 38% 32%, #e8eef3 0%, #b9cbd9 78%);
  box-shadow: inset 0 0 0 1.4px var(--fillet), 0 1px 3px rgba(0,0,0,0.3);
}

/* Card Face Model v3 (card-icon system 2026-06-20): the lead glyph, bare icon,
   pips and time marks now use ONE layer-agnostic treatment (card-styles.css
   .fx-glyph / .trigger-pill / .mag-* — light fill + dark contour + glow, dark
   capsule). The old per-layer silver-seal recolor is retired (it was the source
   of the white-on-L3 inconsistency); the dark pill body + light glyph read on
   the silver glass without a plate. */

/* text block */
.style-currency-specimen.layer-L3 .card-text {
  padding: 11px 13px 7px;
  gap: 7px;
}
.style-currency-specimen.layer-L3 .type-line {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--gris-type);
  border-bottom-color: var(--gris-rule);
  padding-bottom: 6px;
}
.style-currency-specimen.layer-L3 .card-body {
  font-family: "Cormorant Garamond", serif;
  /* Legibility pass (live-game-backlog #15): the light 11.5px serif in slate on
     the silver glass read as a wash. Darker ink + a step up in size/weight + the
     banner's engraved highlight to lift it off the field. */
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.34;
  color: var(--gris-body);
  text-shadow: 0 1px 0 rgba(255,255,255,0.28);
}

/* banner: silver glass with a gold top rule, engraved dark-gold name */
.style-currency-specimen.layer-L3 .card-name-banner {
  flex: 0 0 40px;
  margin: 0;
  background: linear-gradient(180deg, var(--banner-a) 0%, var(--banner-b) 100%);
  border-top: 2px solid var(--banner-rule);
  border-bottom: none;
  color: var(--banner-fg);
}
.style-currency-specimen.layer-L3 .card-name {
  font-family: "Cinzel", serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.16em;
  color: var(--banner-fg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* F · Coupon L3 — solid inner ring + corner rosettes
   (perforation reads as L2-coupon language; L3 closes it into a
   formal cartouche.) */
.style-currency-coupon.layer-L3 .frame-border {
  border-width: 3px;
  box-shadow:
    inset 0 0 0 5px var(--card-bg),
    inset 0 0 0 6px var(--border-color),
    inset 0 0 0 9px var(--card-bg),
    inset 0 0 0 11px var(--border-color),
    inset 0 0 0 14px var(--card-bg),
    inset 0 0 0 15px var(--border-color);
}
.style-currency-coupon.layer-L3 .frame-chrome::after { display: none; }
.style-currency-coupon.layer-L3 .frame-chrome {
  background:
    radial-gradient(circle at 22px 22px,
      rgba(106,74,24,0.55) 0 3px,
      transparent 4px,
      rgba(106,74,24,0.30) 7px 8px,
      transparent 9px),
    radial-gradient(circle at calc(100% - 22px) 22px,
      rgba(106,74,24,0.55) 0 3px,
      transparent 4px,
      rgba(106,74,24,0.30) 7px 8px,
      transparent 9px),
    radial-gradient(circle at 22px calc(100% - 22px),
      rgba(106,74,24,0.55) 0 3px,
      transparent 4px,
      rgba(106,74,24,0.30) 7px 8px,
      transparent 9px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 22px),
      rgba(106,74,24,0.55) 0 3px,
      transparent 4px,
      rgba(106,74,24,0.30) 7px 8px,
      transparent 9px),
    repeating-linear-gradient(45deg,
      transparent 0,
      rgba(106,74,24,0.10) 0.6px,
      transparent 1.4px,
      transparent 6px),
    repeating-linear-gradient(-45deg,
      transparent 0,
      rgba(106,74,24,0.08) 0.6px,
      transparent 1.4px,
      transparent 9px),
    var(--card-bg);
}

/* ============================================================
   L2 · BULLY COIN  — the L2 rework (design-references/
   "L2 design rework (June 15th).html"). L2 always maps to the
   coupon variant (card-face.ts LAYER_VARIANT), so this is scoped
   to .style-currency-coupon.layer-L2 only: it overrides the ochre
   paper note into a heavy bronze coin — punched-well keypad in a
   gutter band around a recessed inner "plate" (note-within-a-note).
   Coupon L1/L3 (gallery-only) and every other style are untouched.
   Geometry is absolute px at the native 260x440 face; the app
   scales the whole card via transform, so it holds at any size.
   ============================================================ */

/* RE-PALETTED 2026-06-21 (Maxx) bronze → struck IRON & OXBLOOD per
   design-references/L2 design work (June 21st).html. Same coin structure; the
   var NAMES are kept (so every sub-rule below updates automatically) but the
   values are iron/steel. Marks stay oxblood across all polarities (the reference
   shows one mark colour, matching the existing per-pol-less decision). */
.style-currency-coupon.layer-L2 {
  --bronze-hi: #5a5f66;   /* iron highlight */
  --bronze: #34383e;      /* iron mid */
  --bronze-lo: #1c1e22;   /* iron low */
  --rim: #0d0f12;         /* dark iron rim */
  --gold: #c6cdd4;        /* light steel ink (text) */
  --coin-art: #2f333a;    /* dark iron art panel */
  --socket-mark: #b8463a; /* oxblood — all polarities */
  --coin-glow: rgba(184,70,58,0.9);
  --coin-glow-soft: rgba(184,70,58,0.5);
  --coin-tri-hi: rgba(214,110,96,1);

  position: relative;
  overflow: hidden;
  border-radius: 2px;
  color: var(--gold);
  background:
    radial-gradient(ellipse at 18% 22%, rgba(120,135,150,0.16) 0%, transparent 26%),
    radial-gradient(ellipse at 82% 72%, rgba(120,135,150,0.12) 0%, transparent 22%),
    radial-gradient(ellipse at 50% 0%, rgba(120,135,150,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #41454b 0%, var(--bronze) 40%, var(--bronze-lo) 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 3px 10px rgba(0,0,0,0.5),
    inset 0 1px 2px rgba(170,182,196,0.22),
    inset 0 -2px 5px rgba(8,10,14,0.7);
}

/* Marks encode WHO (live-game-backlog #18, Maxx 2026-06-30): oxblood = enemies
   (the base vars above), STEEL BLUE = your own pieces, GOLD = everyone. The old
   "red across all polarities" call was made on the retired BRONZE coin (tints
   sank into bronze); on the iron re-palette the blue/gold marks read cleanly.
   card-face.ts already stamps pol-enemy/pol-friendly/pol-neutral off the
   effect's `affects`, so this is pure CSS. */
.style-currency-coupon.layer-L2.pol-friendly {
  --socket-mark: #3a6fb8;
  --coin-glow: rgba(58,111,184,0.9);
  --coin-glow-soft: rgba(58,111,184,0.5);
  --coin-tri-hi: rgba(110,160,220,1);
}
.style-currency-coupon.layer-L2.pol-neutral {
  --socket-mark: #c9a437;
  --coin-glow: rgba(201,164,55,0.9);
  --coin-glow-soft: rgba(201,164,55,0.5);
  --coin-tri-hi: rgba(228,199,110,1);
}

/* no frame hole-punch — the coin's wells sit on the bronze, not cut through it */
.style-currency-coupon.layer-L2 .frame-wrap {
  -webkit-mask: none;
  mask: none;
}
/* drop the ochre guilloché + dashed perforation; the bronze field is on .card */
.style-currency-coupon.layer-L2 .frame-chrome { background: none; }
.style-currency-coupon.layer-L2 .frame-chrome::after { display: none; }

/* frame-border (z=3, inset:0) becomes the dark outer rim rule */
.style-currency-coupon.layer-L2 .frame-border {
  border: none;
  box-shadow:
    inset 0 0 0 1.5px var(--rim),
    inset 0 1px 2px rgba(0,0,0,0.5),
    inset 0 -1px 2px rgba(170,182,196,0.25);
}

/* socket-ring (z=4): keypad sits on the thin rim, ~8px from the card edge (the
   June-21 design — sockets near the edge, no thick gutter band). */
.style-currency-coupon.layer-L2 .socket-ring { inset: 8px; }
.style-currency-coupon.layer-L2 .socket-ring::before { display: none; }

/* card-inner = the recessed plate. Thin rim (inset 16px) so the content fills the
   card like L1/L3 — the June-21 design's proportions, not the old deep bronze
   note-within-a-note (32px). */
.style-currency-coupon.layer-L2 .card-inner {
  inset: 16px;
  border: 1px solid var(--rim);
  border-radius: 1px;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(170,182,196,0.10) 0%, transparent 58%),
    linear-gradient(180deg, #34383e 0%, #1c1e22 100%);
  box-shadow:
    0 0 0 1px var(--fillet),
    inset 0 2px 7px rgba(0,0,0,0.5);
}

/* art window: dark intaglio panel */
.style-currency-coupon.layer-L2 .card-art-wrap {
  flex: 0 0 42%;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--rim);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.42) 0%, transparent 62%),
    radial-gradient(circle at 50% 36%, rgba(170,182,196,0.2) 0%, transparent 40%),
    repeating-linear-gradient(60deg, rgba(58,42,20,0.18) 0 0.6px, transparent 0.6px 4px),
    var(--coin-art);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.55);
}
.style-currency-coupon.layer-L2 .card-art-wrap::after { display: none; }

/* art label → cartouche plate at the foot of the art (when no art image) */
.style-currency-coupon.layer-L2 .art-label {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", "Space Mono", monospace;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(16,18,24,0.78);
  border: 1px solid var(--rim);
  padding: 3px 7px;
  white-space: nowrap;
}

/* gesture badge — bronze coin nub, top-left of the art */
.style-currency-coupon.layer-L2 .gesture-glyph {
  top: 7px;
  left: 7px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  padding: 5px;
  color: var(--rim);
  background: radial-gradient(circle at 38% 34%, var(--bronze-hi), #2a2e34 70%, #15171b);
  box-shadow: 0 1px 2px rgba(0,0,0,0.55), inset 0 1px 1px rgba(180,192,205,0.55);
}


/* Card Face Model v3 (card-icon system 2026-06-20): the scope cameo is now
   circle-less with an intent glow, and the trigger pill is the shared split
   capsule (gold header + dark body) — both layer-agnostic in card-styles.css.
   The old bronze-coin-nub recolor for the scope/pill/pips is retired; the shared
   treatment reads on the bronze coin without the nub plate. */

/* text block */
.style-currency-coupon.layer-L2 .card-text {
  padding: 9px 11px 6px;
  gap: 0;
}
.style-currency-coupon.layer-L2 .type-line {
  font-family: "Cinzel", serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  border-bottom-color: rgba(240,226,184,0.55);
  padding-bottom: 5px;
}
.style-currency-coupon.layer-L2 .card-body {
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  line-height: 1.34;
  color: var(--gold);
  margin-top: 7px;
}

/* banner */
.style-currency-coupon.layer-L2 .card-name-banner {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 0;
  background: linear-gradient(180deg, #222428 0%, #15161a 100%);
  border-top: 2px solid var(--socket-mark);
  border-bottom: none;
  color: var(--gold);
  font-size: 21px;
}
.style-currency-coupon.layer-L2 .card-name-banner::before,
.style-currency-coupon.layer-L2 .card-name-banner::after { display: none; }
.style-currency-coupon.layer-L2 .card-name {
  font-family: "Cinzel", serif;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-shadow: 1px 1px 0 #1a1006, 0 0 7px rgba(240,226,184,0.3);
}

/* ---------- punched wells + keypad marks ---------- */
.style-currency-coupon.layer-L2 .socket { width: 15px; height: 15px; }
.style-currency-coupon.layer-L2 .socket-well {
  /* gradient centred at 50% (the spec's 42% lit the lower ring brighter than
     the upper, making a dead-centre mark read as sitting high in the groove). */
  background: radial-gradient(circle at 50% 50%, #0e1013 0%, #2a2e34 68%, #4a4f57 100%);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.8),
    inset 0 -2px 3px rgba(170,182,196,0.22),
    0 1px 0 rgba(180,192,205,0.4);
}
/* affected-cell mark */
.style-currency-coupon.layer-L2 .socket-circle {
  width: 7px;
  height: 7px;
  background: var(--socket-mark);
  box-shadow: 0 0 7px var(--coin-glow), inset 0 -1px 1px rgba(0,0,0,0.5);
}
/* direction mark — full direction line; clip-path keeps the centroid at the
   box center (base at 75%) so every inline rotate() stays optically centered */
.style-currency-coupon.layer-L2 .socket-triangle {
  width: 10px;
  height: 10px;
  border: none;
  background: var(--socket-mark);
  clip-path: polygon(50% 0%, 100% 75%, 0% 75%);
  filter:
    drop-shadow(0 0 4px var(--coin-tri-hi))
    drop-shadow(0 0 9px var(--coin-glow))
    drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
/* the whole well blooms under a direction mark — reads hotter than the circles */
.style-currency-coupon.layer-L2 .socket:has(.socket-triangle) .socket-well {
  box-shadow:
    inset 0 3px 4px rgba(0,0,0,0.85),
    inset 0 -1px 1px rgba(170,182,196,0.25),
    0 0 14px 2px var(--coin-glow),
    0 0 30px 8px var(--coin-glow-soft);
}
/* empty well keeps a faint dark dot so the 8-grid stays legible */
.style-currency-coupon.layer-L2 .socket:not(:has(.socket-circle, .socket-triangle)) .socket-well::after {
  width: 5px;
  height: 5px;
  background: #0e0a04;
  opacity: 0.55;
}

/* ============================================================
   META · ONYX & GOLD  (plan/player-carry § Card-face visual)
   The 4th material tier, alongside promissory / coupon / specimen:
   a black onyx plate under a bright gold FOIL frame + nameplate
   that wraps art + body + title as one matted panel, a slow
   specular sheen, and NO sockets (meta plays like L1/L3). Ported
   from design-references/Meta Card Design.html (Countermand).
   Selected by gestureCategory==="meta" (card-face.ts isMetaFace).
   ============================================================ */
.style-currency-meta {
  --card-font: "Playfair Display", "Cormorant Garamond", serif;
  --body-font: "Cormorant Garamond", serif;
  --name-font: "Cinzel", serif;
  --type-font: "Cinzel", serif;
  --card-radius: 2px;
  --border-w: 14px;

  --card-bg: #161109;
  --card-fg: #f0dca0;
  --border-color: #e8c668;
  --art-bg: #1d1609;
  --rule-color: #e8c668;
  --type-color: #f0d488;
  --body-color: #e7d6a4;
  --banner-fg: #1a1305;
  --gesture-bg: #161109;
  --gesture-stroke: #e8c668;
  --gesture-color: #e8c668;
  --foil: linear-gradient(118deg,
    #8a6a1f 0%, #f3df9a 15%, #d4ab44 31%,
    #fff6d6 47%, #d6ad42 62%, #9c7820 80%, #ecca6e 100%);
  --guilloche: rgba(232,198,104,0.30);
}
/* keep the gold border/rule regardless of card polarity (the shared
   .style-currency.pol-* rules set --border-color red/blue at higher specificity). */
.style-currency-meta.pol-enemy,
.style-currency-meta.pol-friendly,
.style-currency-meta.pol-neutral { --border-color: #e8c668; --rule-color: #e8c668; }

/* foil border band with radial guilloché */
.style-currency-meta .frame-chrome {
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0, var(--guilloche) 0.6px, transparent 1.4px, transparent 6px),
    var(--foil);
  background-blend-mode: overlay, normal;
}
/* corner intaglio medallions on the foil */
.style-currency-meta .frame-chrome::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20px 20px, rgba(232,198,104,0.7) 0 2.5px, transparent 3.5px, rgba(232,198,104,0.35) 6px 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 20px) 20px, rgba(232,198,104,0.7) 0 2.5px, transparent 3.5px, rgba(232,198,104,0.35) 6px 7px, transparent 8px),
    radial-gradient(circle at 20px calc(100% - 20px), rgba(232,198,104,0.7) 0 2.5px, transparent 3.5px, rgba(232,198,104,0.35) 6px 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), rgba(232,198,104,0.7) 0 2.5px, transparent 3.5px, rgba(232,198,104,0.35) 6px 7px, transparent 8px);
}
/* concentric thin gold rules over the foil (the mc-border look) */
.style-currency-meta .frame-border {
  border-width: 1.5px;
  border-color: var(--border-color);
  box-shadow:
    inset 0 0 0 4px transparent,
    inset 0 0 0 5px var(--border-color),
    inset 0 0 0 9px transparent,
    inset 0 0 0 10px var(--border-color),
    inset 0 0 0 12px transparent,
    inset 0 0 0 13px var(--border-color);
}
/* one continuous gold-bordered onyx panel wrapping art + text + banner */
.style-currency-meta .card-inner {
  inset: 18px;
  border: 1.5px solid var(--border-color);
  background: var(--card-bg);
}
/* art window: authored art fills it (gold-matted by the inner border); the
   crosshatch + sigil cartouche are the no-art fallback (2026-07-02 — the meta
   face composes the shared art/icon/counter nuances like every other variant) */
.style-currency-meta .card-art-wrap {
  flex: 0 0 38%;
  margin: 0;
  border: none;
  border-bottom: 1.5px solid var(--border-color);
  background: var(--art-bg);
  display: flex; align-items: center; justify-content: center;
}
/* the shared face nuances compose over the onyx window: the magnitude bar sits
   clear of the meta cog (6+22px, top-left), matching the shared top-left slot. */
.style-currency-meta .mag-bar { left: 34px; }
/* recolor the shared art crosshatch overprint to gold-on-onyx */
.style-currency-meta .card-art-wrap::after {
  background:
    repeating-linear-gradient(45deg,  rgba(232,198,104,0.20) 0 0.6px, transparent 0.6px 3px),
    repeating-linear-gradient(-45deg, rgba(232,198,104,0.11) 0 0.6px, transparent 0.6px 5px);
}
/* the META SIGIL cartouche (centered) */
.style-currency-meta .meta-sigil { width: auto; height: auto; z-index: 1; }
.style-currency-meta .art-label {
  font-family: "JetBrains Mono", "Space Mono", monospace;
  font-size: 8px; letter-spacing: 0.22em;
  background: var(--art-bg); color: var(--border-color);
  border: 1px solid var(--border-color); padding: 4px 8px; border-radius: 2px;
}
/* the cog application-gesture, top-left */
.style-currency-meta .gesture-glyph.meta-cog { border-radius: 0; }
.style-currency-meta .meta-cog svg { display: block; width: 100%; height: 100%; }
/* type line: Cinzel gold with a ✦ lead + bottom rule */
.style-currency-meta .type-line { color: var(--type-color); border-bottom-color: var(--rule-color); }
.style-currency-meta .type-line::before {
  content: "✦"; font-size: 12px; line-height: 1; margin-right: 2px; color: var(--type-color);
}
/* foil nameplate: dark ink on gold, double top rule + flanking studs */
.style-currency-meta .card-name-banner {
  flex: 0 0 36px;
  margin: 0;
  background: var(--foil);
  color: var(--banner-fg);
  font-size: 18px; letter-spacing: 0.2em; font-weight: 800;
  border-top: 3px double var(--border-color);
  border-bottom: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45), 0 -1px 0 rgba(0,0,0,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.25);
}
.style-currency-meta .card-name-banner::before,
.style-currency-meta .card-name-banner::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--border-color); opacity: 0.85;
}
.style-currency-meta .card-name-banner::before { left: 9px; }
.style-currency-meta .card-name-banner::after  { right: 9px; }
/* the shiny part: a slow travelling specular sheen over the whole card */
.style-currency-meta::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg,
    transparent 42%, rgba(255,255,255,0.42) 49%, rgba(255,255,255,0.06) 53%, transparent 60%);
  background-size: 280% 100%; mix-blend-mode: screen; opacity: 0.85;
  animation: mcSheen 6.5s ease-in-out infinite;
}
@keyframes mcSheen {
  0%   { background-position: 135% 0; }
  55%  { background-position: -45% 0; }
  100% { background-position: -45% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .style-currency-meta::after { animation: none; background-position: 28% 0; }
}