/* Canonical UI component library — Folio Card, Service Tile, Value Math, Section Label, Steps, Trust Pills, CTA Button, Folio Rule.
   Consumed by /components (the live reference) and /bible (the Ecosystem character-select panel, which renders a live Folio Card).
   Extracted 2026-07-24 from bible/index.html, where these were previously redeclared alongside narrative content. */


/* ---------------------------------------------------------------------------
   PLATFORM (the plinth) - L1 primitive, locked 2026-08-20.
   The ground anything in the brand stands on: the mark, a product emoji, a
   character, a coin. Same shape as the SVG platform in mark.js (a graduated
   ellipse a touch wider than the object it sits under), expressed in em so it scales with
   whatever it sits under - never re-tuned per size.

   SIZE RULE (locked 2026-08-23): only at 40px and up. Below that the ellipse is a
   pixel and a half tall - it stops reading as a floor and becomes a faint mark that
   needs explaining. Small chips, favicons and inline glyphs carry no ground; the seal
   is what does the work at 16px.

   RULE: the ground is always the ink of the thing standing on it. Never a
   second colour. A multicoloured glyph (an emoji) has no single ink, so it
   takes the brand's only accent, gold.

   Gradient, not blur or box-shadow: no filter to rasterise, and it degrades
   to nothing (rather than to a grey box) anywhere gradients are unsupported.

     <span class="on-plinth">{emoji}</span>
     --plinth-w / --plinth-h  size, in em      --plinth-drop  vertical offset
     .ink-dark / .ink-light   for paper and for light-on-dark placements
   --------------------------------------------------------------------------- */
.on-plinth{position:relative;display:inline-block;align-self:flex-start;
  --plinth-a:rgba(200,169,110,.5);--plinth-b:rgba(200,169,110,.24)}
.on-plinth::after{content:'';position:absolute;left:50%;bottom:var(--plinth-drop,-.04em);
  width:var(--plinth-w,.92em);height:var(--plinth-h,.2em);transform:translateX(-50%);
  pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 50%,var(--plinth-a) 0%,var(--plinth-b) 55%,transparent 100%)}
.on-plinth.ink-dark{--plinth-a:rgba(11,18,21,.42);--plinth-b:rgba(11,18,21,.18)}
.on-plinth.ink-light{--plinth-a:rgba(240,237,230,.34);--plinth-b:rgba(240,237,230,.15)}

/* every product emoji in the library stands on it by default */
.folio-animal{--plinth-w:.8em;--plinth-h:.16em;--plinth-drop:.03em}

/* ---------------------------------------------------------------------------
   COIN — L1 primitive, ported 2026-09-08 (brain#189) from the Mint
   (deliverables/mark-coin-system.html) into a real component. Real CSS 3D:
   two faces plus a 48-reed milled edge, so one object flips, rolls and
   spins on edge. Faces render from mark.js's markPaths()/gemGroup() —
   no mark geometry is redefined here, so the coin restrikes with the die.

   Built via WildcardMark.coin.build(host, {size, finish, legend}); played
   via WildcardMark.coin.motion.{toss,drop,roll,stack,weigh}(...).
   Entry rule (locked 2026-08-23): the coin is earned value, never identity
   — see memory/tasks/brand/mark-coin-system.md.
   --------------------------------------------------------------------------- */
.coin3d{position:relative;transform-style:preserve-3d;will-change:transform}
.coin3d .face{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  backface-visibility:hidden;display:grid;place-items:center}
.coin3d .face.front{transform:translateZ(var(--halfz))}
.coin3d .face.back{transform:rotateY(180deg) translateZ(var(--halfz))}
.coin3d .rimseg{position:absolute;top:0;left:50%;height:100%;transform-origin:0 0;backface-visibility:hidden}
.coin3d .face svg.markart{width:50%;height:50%;position:relative;z-index:2}
.coin3d .legend{position:absolute;inset:0;z-index:2}
.coin3d .legend text{font-family:var(--disp,'Tomorrow',sans-serif);font-weight:700;letter-spacing:2.4px}
.coin3d .shadow{position:absolute;border-radius:50%;filter:blur(8px);background:rgba(0,0,0,.6)}
.coin3d .gleam{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 48%,transparent 58%);
  transform:translateX(-130%);mix-blend-mode:screen}
.coin3d:hover .gleam,.coin3d .gleam.run{animation:coin-sweep 1.15s ease-in-out}
@keyframes coin-sweep{to{transform:translateX(130%)}}

/* finishes — each earns its place (see task file for the per-finish job) */
.fin-gilt .face{background:var(--folio-gradient),#c8a96e}
.fin-gilt .face .markart{color:#6b5527;filter:drop-shadow(0 1.5px 0 rgba(255,240,200,.6))}
.fin-gilt .rimseg{background:linear-gradient(180deg,#8d7440,#e2c489 45%,#7b6436)}
.fin-gilt .legend text{fill:rgba(70,54,22,.7)}

.fin-obsidian .face{background:radial-gradient(120% 120% at 30% 20%,#26313a,#0c1418 70%)}
.fin-obsidian .face .markart{color:#c8a96e;filter:drop-shadow(0 0 9px rgba(200,169,110,.55))}
.fin-obsidian .rimseg{background:linear-gradient(180deg,#0d151a,#3b444d 45%,#0b1216)}
.fin-obsidian .legend text{fill:rgba(200,169,110,.6)}

.fin-steel .face{background:conic-gradient(from 210deg,#8b959e,#e5eaee 12%,#7e8891 28%,#c3cbd2 44%,#6e7880 62%,#dfe5ea 78%,#828c95 100%)}
.fin-steel .face .markart{color:#4c565f;filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.65))}
.fin-steel .rimseg{background:linear-gradient(180deg,#5f6971,#cfd6db 45%,#5b656d)}
.fin-steel .legend text{fill:rgba(50,60,68,.6)}

.fin-vault .face{background:linear-gradient(150deg,rgba(240,237,230,.17),rgba(175,145,84,.15) 55%,rgba(240,237,230,.05));
  backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -14px 30px -18px rgba(0,0,0,.9)}
.fin-vault .face .markart{color:rgba(240,237,230,.92);filter:drop-shadow(0 0 10px rgba(240,205,130,.5))}
.fin-vault .rimseg{background:linear-gradient(180deg,rgba(240,237,230,.3),rgba(175,145,84,.42) 45%,rgba(240,237,230,.12))}
.fin-vault .legend text{fill:rgba(240,237,230,.5)}
@media(prefers-reduced-motion:reduce){.coin3d:hover .gleam,.coin3d .gleam.run{animation:none}}

/* Folio Card */
/* Folio Card frame = the v3 geometry (docs/CARD-STANDARD.md §3): radius .0761w, edge .0087w, inner .0685w. --card-w is the card's rendered width. */
.folio-wrap{--card-w:300px;width:100%;max-width:var(--card-w);margin:0 auto;aspect-ratio:5/7;border-radius:calc(var(--card-w) * .0761);background:var(--folio-gradient);padding:calc(var(--card-w) * .0087);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.folio-card{width:100%;height:100%;border-radius:calc(var(--card-w) * .0685);background:var(--card-deep);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:26px 22px;text-align:center}
.folio-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 36%,transparent 40%,rgba(0,0,0,.45) 100%);pointer-events:none}
.folio-idx{position:absolute;font-family:var(--disp,'Tomorrow',sans-serif);font-size:12px;font-weight:800;color:var(--gold-dim);letter-spacing:1px}
.folio-idx.tl{top:14px;left:15px}.folio-idx.br{bottom:14px;right:15px;transform:rotate(180deg)}
.folio-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(175,145,84,.15);border:1px solid rgba(175,145,84,.3);border-radius:4px;padding:4px 9px;font-family:var(--disp,'Tomorrow',sans-serif);font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:2px}
.folio-animal{font-size:78px;line-height:1;margin:20px 0 8px;filter:drop-shadow(0 0 18px rgba(175,145,84,.4));transition:transform .5s;position:relative;display:inline-block}
.folio-card.swap .folio-animal{transform:scale(.6) rotate(-8deg);opacity:0}
.folio-name{font-family:var(--disp,'Tomorrow',sans-serif);font-weight:700;font-size:23px;letter-spacing:.3px;position:relative;z-index:2}
.folio-cat{font-family:var(--disp,'Tomorrow',sans-serif);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:4px}
.folio-rule{width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-b),transparent);margin:14px auto}
.folio-tag{font-size:13px;line-height:1.5;color:var(--white);position:relative;z-index:2;font-style:italic}
.folio-foot{margin-top:auto;width:100%;border-top:1px solid rgba(175,145,84,.15);padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;position:relative;z-index:2}
.folio-foot .brand{font-family:var(--disp,'Tomorrow',sans-serif);font-size:8px;font-weight:800;letter-spacing:2px;color:var(--muted)}
.folio-foot .price{font-family:var(--disp,'Tomorrow',sans-serif);font-weight:900;font-size:19px;color:var(--gold);font-variant-numeric:tabular-nums}
.folio-foot .price small{font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.5px}

/* Section Label */
.c-section-label{font-family:var(--disp,'Tomorrow',sans-serif);font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;width:100%}
.c-section-label::after{content:'';flex:1;height:1px;background:var(--faint)}

/* Service Tile */
.c-tile{background:var(--card);border:1px solid var(--gold-dim);border-radius:8px;padding:12px 14px;display:flex;gap:11px;width:100%}
.c-tile .an{font-size:24px;line-height:1;flex-shrink:0;align-self:flex-start}
.c-tile .tn{font-family:var(--disp,'Tomorrow',sans-serif);font-size:15px;font-weight:700}
.c-tile .tsub{font-size:9px;color:var(--gold);font-weight:600;letter-spacing:.8px;text-transform:uppercase;margin:2px 0}
.c-tile .td{font-size:11px;color:var(--muted);line-height:1.45}

/* Value Math / Comparison Box */
.c-math{background:var(--card);border:1px solid var(--gold-dim);border-radius:8px;padding:16px;width:100%}
.c-math .r{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.c-math .r.wc{border-top:1px solid var(--faint);margin-top:4px;padding-top:12px}
.c-math .r .k{color:var(--muted)}
.c-math .r.wc .k{color:var(--white);font-family:var(--disp,'Tomorrow',sans-serif);font-weight:700}
.c-math .r .v{font-variant-numeric:tabular-nums;color:var(--muted)}
.c-math .r.wc .v{font-family:var(--disp,'Tomorrow',sans-serif);font-weight:900;font-size:22px;color:var(--gold)}

/* CTA Button */
.c-cta{background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:var(--disp,'Tomorrow',sans-serif);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:11px 24px;border-radius:6px;cursor:pointer;transition:all .25s}
.c-cta:hover{background:var(--gold);color:#20180a}

/* Trust Pills */
.c-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.c-pill{background:var(--elevated);border:1px solid var(--faint);border-radius:20px;padding:4px 11px;font-size:10px;color:var(--muted)}
.c-pill .ck{color:var(--gold);font-weight:700}

/* Steps — number marker is the real original coin (2026-06-09, component-library.html):
   a plain folio-gradient circle, spun+jumped by the actual `coin-jump` keyframe on hover.
   Not the loonie cut — that was a later (2026-07-18) misattribution. */
.c-steps{display:flex;flex-direction:column;gap:12px;width:100%}
.c-step{display:flex;gap:11px;align-items:flex-start;perspective:400px}
.c-step .num{
  width:22px;height:22px;flex-shrink:0;
  background:var(--folio-gradient);
  border-radius:50%;
  font-family:var(--disp,'Tomorrow',sans-serif);font-size:11px;font-weight:800;color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;cursor:pointer;
}
.c-step:hover .num{animation:coin-jump 1s cubic-bezier(.34,1.2,.64,1) forwards}
@keyframes coin-jump{
  0%{transform:translateY(0) rotateY(0deg) scale(1);filter:drop-shadow(0 0 14px rgba(175,145,84,.35))}
  20%{transform:translateY(-16px) rotateY(90deg) scale(1.12);filter:drop-shadow(0 6px 18px rgba(200,169,110,.55))}
  45%{transform:translateY(-22px) rotateY(180deg) scale(1.16);filter:drop-shadow(0 8px 22px rgba(200,169,110,.65))}
  65%{transform:translateY(-14px) rotateY(270deg) scale(1.1);filter:drop-shadow(0 4px 16px rgba(200,169,110,.5))}
  80%{transform:translateY(-3px) rotateY(360deg) scale(1.03);filter:drop-shadow(0 1px 12px rgba(175,145,84,.4))}
  92%{transform:translateY(3px) rotateY(360deg) scale(.98)}
  100%{transform:translateY(0) rotateY(360deg) scale(1);filter:drop-shadow(0 0 14px rgba(175,145,84,.35))}
}
@media(prefers-reduced-motion:reduce){.c-step:hover .num{animation:none}}
.c-step .st{font-family:var(--disp,'Tomorrow',sans-serif);font-size:13px;font-weight:700}
.c-step .sd{font-size:11px;color:var(--muted);line-height:1.4}

/* Style A card — "Refined Dark" (2026-06-09, component-library.html): the print/postcard
   treatment. Flat elevated background + solid border, no gradient, no bevel — nothing
   here that print/foil/single-colour reproduction can't handle. Distinct from the Folio
   Card above (Style B, digital/collectible — gradient border, metallic bevel). */
.a-card{width:240px;height:336px;border-radius:13px;background:var(--elevated);border:1.5px solid var(--gold-dim);padding:17px 17px 9px;display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.a-card-frame{flex:1;border:1px solid rgba(175,145,84,.18);border-radius:4px;display:flex;flex-direction:column;overflow:hidden}
.a-card-head{height:28px;flex-shrink:0;padding:0 11px;display:flex;align-items:center}
.a-card-index{display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--disp,'Tomorrow',sans-serif);line-height:1}
.a-card-index .suit{font-size:11px;color:var(--gold)}
.a-card-index .code{font-size:5.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(175,145,84,.45)}
.a-card-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px 12px}
.a-card-animal{font-size:60px;line-height:1;margin-bottom:16px}
.a-card-name{font-family:var(--disp,'Tomorrow',sans-serif);font-size:12px;font-weight:900;color:var(--white);text-align:center}
.a-card-rule{width:22px;height:1px;background:var(--gold);margin:9px auto}
.a-card-tag{font-size:9px;color:var(--muted);text-align:center;line-height:1.5;max-width:130px}
.a-card-foot{height:28px;flex-shrink:0;padding:0 11px;display:flex;align-items:center;justify-content:flex-end}
.a-card-foot .a-card-index{transform:rotate(180deg)}
.a-card-brand{text-align:center;flex-shrink:0;font-family:var(--disp,'Tomorrow',sans-serif);font-size:6px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(175,145,84,.4)}

/* ================================================================================================
   v3card — THE card. One 5:7 frame, every value derived from --card-w (locked ratios, 14/184 etc.),
   one face slot. Ported 2026-09-20 from the first real consumer (quotes-teamwildcard/public/quote.css,
   Alex-approved legibility passes 2026-09-19) into the shared home. Spec: brain deliverables/v3card-spec.html,
   record: brain memory/tasks/brand/v3card.md. Consumers set --card-w; nothing else is hand-sized.
   Layers: gilt edge (--folio-gradient) > deep face (--card-deep) > vignette (::after) > glare.
   Modes: .mode-live (cursor tilt + moving glare, web) · default static (glare pinned 34%/26%, PDF/print)
   · flat = a baked 2x PNG of the static card (email — Outlook renders with Word).
   ================================================================================================ */
.v3 {
  --v3-h: calc(var(--card-w) * 7 / 5);
  --v3-r: calc(var(--card-w) * .0761); --v3-edge: calc(var(--card-w) * .0087);
  --v3-ri: calc(var(--card-w) * .0685); --v3-suit: calc(var(--card-w) * .0598);
  --v3-iny: calc(var(--card-w) * .0652); --v3-inx: calc(var(--card-w) * .0707);
  --v3-name: calc(var(--card-w) * .0924); --v3-icon: calc(var(--card-w) * .345);
  --v3-feat: calc(var(--card-w) * .0505); --v3-pad: calc(var(--card-w) * .093);
  --v3-gap: calc(var(--card-w) * .048);
  width: var(--card-w); flex: 0 0 auto;
}
.v3 .edge {
  background: var(--folio-gradient); position: relative; display: block;
  width: 100%; height: var(--v3-h); border-radius: var(--v3-r); padding: var(--v3-edge);
  box-shadow: 0 calc(var(--card-w) * .09) calc(var(--card-w) * .2) rgba(0,0,0,.5);
}
.v3 .face {
  width: 100%; height: 100%; background: var(--card-deep); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; color: var(--white);
  border-radius: var(--v3-ri); justify-content: center;
  padding: var(--v3-pad) calc(var(--v3-pad) * .82); text-align: center; gap: var(--v3-gap);
}
.v3 .face::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 44%, rgba(0,0,0,.45) 100%);
}
.v3 .glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  border-radius: var(--v3-ri);
  background: radial-gradient(circle at var(--gx, 34%) var(--gy, 26%), rgba(240,205,130,.16), transparent 66%),
    conic-gradient(from 210deg at 34% 26%, rgba(218,180,100,.05), rgba(140,160,170,.04), rgba(240,205,130,.07), rgba(120,130,150,.03), rgba(218,180,100,.05));
}
.v3 .suit {
  position: absolute; z-index: 5; display: flex; flex-direction: column; line-height: 1.02;
  color: var(--gold-b); opacity: .78; font-family: var(--disp, 'Tomorrow', sans-serif);
  font-size: var(--v3-suit); font-weight: 700; letter-spacing: .04em;
}
.v3 .suit.tl { top: var(--v3-iny); left: var(--v3-inx); }
.v3 .suit.br { bottom: var(--v3-iny); right: var(--v3-inx); transform: rotate(180deg); }
.v3 .v3-icon {
  width: var(--v3-icon); height: var(--v3-icon); object-fit: contain; z-index: 2;
  filter: drop-shadow(0 calc(var(--card-w) * .03) calc(var(--card-w) * .055) rgba(0,0,0,.5));
}
.v3 .v3-icon.emoji { display: flex; align-items: center; justify-content: center; font-size: calc(var(--v3-icon) * .86); line-height: 1; }
.v3 .v3-icon.mark { padding: calc(var(--v3-icon) * .08); }
.v3 .v3-name { z-index: 5; font-family: var(--disp, 'Tomorrow', sans-serif); font-weight: 700; font-size: var(--v3-name); line-height: 1.08; letter-spacing: .005em; text-wrap: balance; }
.v3 .v3-rule { width: calc(var(--card-w) * .155); height: 1px; z-index: 5; background: linear-gradient(90deg, transparent, var(--gold-b), transparent); }
.v3 .v3-feats { z-index: 5; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--card-w) * .022); width: 100%; }
.v3 .v3-feats li { font-family: var(--body, 'Inter', sans-serif); font-size: var(--v3-feat); line-height: 1.35; color: var(--muted); letter-spacing: .01em; }
.v3 .v3-title { z-index: 5; font-family: var(--body, 'Inter', sans-serif); font-size: var(--v3-feat); line-height: 1.35; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.v3 .v3-brand { z-index: 5; font-family: var(--disp, 'Tomorrow', sans-serif); font-weight: 700; font-size: calc(var(--card-w) * .044); letter-spacing: .16em; color: var(--gold); opacity: .85; margin-top: calc(var(--card-w) * .01); }
/* Emphasis is a frame STATE, not a new card: white (not muted) feature text, nothing else (Alex, 2026-09-19). */
.v3.is-emphasis .v3-feats li { color: var(--white); }
/* Legibility floor (Alex, 2026-09-19): below ~150px the ratio-scaled type rounds to illegible; consumers at
   small widths pin the two type sizes instead of scaling. Kept as a documented override, not in the base. */
.v3.is-small .v3-name { font-size: 14px; }
.v3.is-small .v3-feats li { font-size: 10px; }
/* Live mode — the edge tilts toward the cursor, the glare follows. JS sets --rx/--ry/--gx/--gy. */
.v3.mode-live .edge { transition: transform .14s ease-out; transform: perspective(calc(var(--card-w) * 5)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.v3.mode-live .glare { transition: background-position .14s ease-out; }
@media (prefers-reduced-motion: reduce) { .v3.mode-live .edge { transform: none; transition: none; } }
/* Back — the same frame as the locked identity card: mark centred, WILDCARD under it, corners. Product back = the product suit; identity back = the four-suit column (the signature card). */
.v3.v3-back .face { justify-content: center; gap: calc(var(--card-w) * .07); }
.v3.v3-back .back-mark { width: calc(var(--card-w) * .38); height: calc(var(--card-w) * .38); z-index: 5; filter: drop-shadow(0 0 calc(var(--card-w) * .0815) rgba(175,145,84,.42)); }
/* Wordmark on the card carries no asterisk — the mark is already on it (Alex, 2026-09-20). Same type as the locked identity card: 17px/900/2.5px at 184. */
.v3.v3-back .back-wm { z-index: 5; font-family: var(--disp, 'Tomorrow', sans-serif); font-weight: 900; font-size: var(--v3-name); letter-spacing: calc(var(--card-w) * .0136); color: var(--white); }
.v3.v3-back .suit.four { opacity: .6; }
/* Deck layouts */
.v3-deck { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: flex-start; }
.v3-deck.tight { gap: 14px; }

/* Suits as referenced assets (suits.js installs #suit-S/H/D/C symbols; the bare mark #markBare is the placeholder). */
.suit-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.12em; }
.v3 .suit { gap: calc(var(--card-w) * .014); }
.v3 .suit .suit-icon { width: var(--v3-suit); height: var(--v3-suit); display: block; vertical-align: initial; }
.v3 .suit.four .suit-icon { width: calc(var(--v3-suit) * .78); height: calc(var(--v3-suit) * .78); }
.v3 .v3-icon.placeholder { color: var(--gold-dim); }
.v3.is-template .v3-name, .v3.is-template .v3-feats li { color: var(--muted); }
/* is-mini — the 72px chip (quote bundle tiles, any "which products are inside" row). Same frame,
   icon + name only: no corners, rule, lines or brand foot at this size. Edit this and every chip
   follows — docs/CARD-STANDARD.md §10. Wins over .is-small (declared after it). */
.v3.is-mini .suit, .v3.is-mini .v3-rule, .v3.is-mini .v3-feats, .v3.is-mini .v3-brand { display: none; }
.v3.is-mini .face { justify-content: center; gap: calc(var(--card-w) * .08); padding: calc(var(--card-w) * .1) calc(var(--card-w) * .06); }
.v3.is-mini .v3-icon { width: calc(var(--card-w) * .31); height: calc(var(--card-w) * .31); }
.v3.is-mini .v3-name { font-size: 8.5px; line-height: 1.25; color: var(--muted); letter-spacing: 0; }
.v3.is-mini .edge { box-shadow: 0 calc(var(--card-w) * .06) calc(var(--card-w) * .14) rgba(0,0,0,.45); }