/* web/card.css — reusable hero card. Size via --card-w/--card-h (default A6).
   Consumed by web/index.html and output/hero_battle_cards.html. */

*{ box-sizing:border-box; }

.vd-card{
  width:var(--card-w,105mm); height:var(--card-h,158mm);
  background:var(--paper,#fbf8f2);
  border:0.4mm solid #b9ad97;
  border-radius:2.5mm;
  padding:0; overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:0 1mm 3mm rgba(0,0,0,.18);
  --accent:#7a2b2b;
  color:var(--ink,#1c1a17);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

/* Header band */
.vd-card .hd{ background:var(--accent); color:#fdf7ea; padding:2.6mm 3.4mm 2.4mm;
  display:flex; align-items:flex-start; justify-content:space-between; gap:2mm; }
.vd-card .hd-left{ min-width:0; }
.vd-card .name{ font-size:15pt; font-weight:700; line-height:1.02; letter-spacing:.2px; }
.vd-card .role{ font-size:6.6pt; text-transform:uppercase; letter-spacing:1.4px; opacity:.85; margin-top:.6mm; }
.vd-card .glyph{ font-size:15pt; line-height:1; opacity:.9; flex:0 0 auto; }
.vd-card .cost-badge{ font-size:6.6pt; font-weight:700; letter-spacing:.4px; opacity:.92; }

/* Placeholder art frame */
.vd-card .art{ flex:0 0 auto; height:44mm; margin:2.6mm 3.4mm 0.6mm;
  border:0.45mm dashed var(--accent); border-radius:1.5mm; background:#fff;
  display:flex; align-items:flex-start; justify-content:center; position:relative; overflow:hidden; }
.vd-card .art.has-art{ border-style:solid; }
.vd-card .art .art-img{ width:100%; height:100%; display:block; object-fit:cover; object-position:top; }
.vd-card .art svg{ width:22mm; height:22mm; max-height:70%; margin-top:5mm; color:var(--accent); opacity:.30; }
.vd-card .art .cap{ position:absolute; top:1.2mm; left:1.8mm; font-size:5pt; letter-spacing:.8px;
  text-transform:uppercase; color:var(--accent); opacity:.6; }
.vd-card .art .wm{ position:absolute; bottom:1mm; right:1.8mm; font-size:6pt; color:var(--muted,#6b6459);
  opacity:.5; font-style:italic; }

/* Profile strip */
.vd-card .profile{ display:flex; align-items:center; gap:2mm; padding:2mm 3.4mm;
  border-top:0.3mm solid var(--line,#d8cfbf); border-bottom:0.3mm solid var(--line,#d8cfbf); }
.vd-card .stat{ display:flex; align-items:baseline; gap:1mm;
  border:0.3mm solid var(--line,#d8cfbf); border-radius:1.5mm; padding:.8mm 2mm; background:#fff; }
.vd-card .stat b{ font-size:11pt; }
.vd-card .stat span{ font-size:6pt; text-transform:uppercase; letter-spacing:.6px; color:var(--muted,#6b6459); }
.vd-card .lives{ margin-left:auto; display:flex; align-items:center; gap:1.2mm;
  font-size:6pt; text-transform:uppercase; letter-spacing:.6px; color:var(--muted,#6b6459); }
.vd-card .pip{ width:2.6mm; height:2.6mm; border-radius:50%; border:0.4mm solid var(--accent);
  display:inline-block; }
.vd-card .pip.f{ background:var(--accent); }

/* Traits */
.vd-card .body{ flex:0 0 auto; padding:2.2mm 3.4mm 0; overflow:hidden; }
.vd-card .sect{ font-size:5.8pt; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--accent); font-weight:700; margin:0 0 1mm; }
.vd-card .trait{ margin-bottom:1.5mm; line-height:1.16; }
.vd-card .trait .tn{ font-weight:700; font-size:8pt; }
.vd-card .trait .td{ font-size:7.4pt; color:#2c2822; }
.vd-card .dag{ color:var(--accent); font-weight:700; }
/* App hero cards: hide inline trait text and let the chips flow inline. */
.heroes-deck .vd-card .trait .td{ display:none; }
.heroes-deck .vd-card .body{ display:flex; flex-wrap:wrap; gap:1mm 1.5mm; }
.heroes-deck .vd-card .sect{ width:100%; flex:0 0 100%; }
.heroes-deck .vd-card .trait{ margin:0; }

/* Passive */
.vd-card .passive{ margin:1.5mm 3.4mm 2mm; background:var(--passive-bg,#f3ead6);
  border-left:1mm solid var(--accent); border-radius:1mm;
  padding:1.6mm 2.4mm 2mm; line-height:1.05; }
.vd-card .passive .pt{ font-size:5.8pt; text-transform:uppercase; letter-spacing:1px;
  color:var(--accent); font-weight:700; line-height:1.2; }
.vd-card .passive .pn{ font-weight:700; font-size:8pt; line-height:1.05; }
.vd-card .passive .pd{ font-size:7.4pt; line-height:1.05; color:#2c2822; }
.vd-card .passive ul{ margin:.6mm 0 0; padding-left:3.6mm; }
.vd-card .passive li{ font-size:7.2pt; line-height:1.05; margin-bottom:.2mm; }

/* Footer */
.vd-card .ft{ flex:0 0 auto; padding:1.8mm 3.4mm 2.2mm; border-top:0.3mm solid var(--line,#d8cfbf); }
.vd-card .ft .eq{ font-size:6.8pt; color:var(--muted,#6b6459); font-style:italic; line-height:1.15; }
.vd-card .ft .eq b{ font-style:normal; color:var(--ink,#1c1a17); text-transform:uppercase;
  letter-spacing:.6px; font-size:5.6pt; }

/* Layout helpers for a deck of cards */
.vd-deck{ display:flex; flex-wrap:wrap; gap:6mm; justify-content:center; }