/* Datasheet card. Large 190 x 135 mm (2 per portrait sheet); small = the same card at zoom .7263 (138 x 98 mm, 4 per landscape sheet).
   The layout follows the shape of a 10th edition datasheet (stat row, weapon tables, abilities column, keyword bar) but is our own CSS:
   no official frames, textures, icons or artwork. Two colours per card: --c1 (header) and --c2 (banner). */
.ds {
  --c1: #2f3a44; --c2: #171d23; --fs: 3.6mm;
  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif; --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --paper: #f3f1ea; --paper2: #e6e3d9; --ink: #1b1b1b; --rule: #cfcbbf;
  position: relative; box-sizing: border-box; width: 190mm; height: 135mm; flex: none;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--fs); line-height: 1.22; text-align: left;
  border: .5mm solid var(--c2);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ds.small { zoom: .7263; }
.ds.rounded { border-radius: 2.5mm; }
.ds * { box-sizing: border-box; }
.ds b { font-weight: 700; }

/* ---------- header band ---------- */
.ds-head { flex: none; position: relative; background: var(--c1); color: #fff; padding: 2.4mm 4mm 2mm; }
.ds-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.2mm; background: var(--c2); }
.ds-name { font: 700 7.2mm/1 var(--head); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; padding-right: 30mm; }
.ds-tag {
  position: absolute; right: 4mm; top: 2.6mm; font: 700 2.4mm/1 var(--head); letter-spacing: .12em; text-transform: uppercase;
  padding: .9mm 1.6mm; border: .3mm solid #fff9; border-radius: .6mm; opacity: .9;
}
.ds-pts { position: absolute; right: 4mm; bottom: 3.4mm; font: 700 3mm/1 var(--head); text-transform: uppercase; letter-spacing: .06em; opacity: .95; text-align: right; }
.ds-stats { margin-top: 2mm; display: flex; flex-direction: column; gap: .8mm; }
.ds-line { display: flex; align-items: flex-end; gap: 1.6mm; }
.stat { width: 11mm; text-align: center; }
.stat i { display: block; font: 700 2.5mm/1 var(--head); font-style: normal; letter-spacing: .08em; margin-bottom: .8mm; }
.ds-line.more .stat i { visibility: hidden; height: 0; margin: 0; }
.stat b {
  display: flex; align-items: center; justify-content: center; height: 9mm; width: 11mm; margin: 0 auto;
  background: var(--c2); clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
  font: 700 4.3mm/1 var(--head); color: var(--ink); position: relative;
}
.stat b::before { content: ''; position: absolute; inset: .6mm; background: #fff; clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); }
.stat b span { position: relative; }
.ds-line .who { align-self: center; padding-bottom: .5mm; font: 700 3mm/1 var(--head); text-transform: uppercase; letter-spacing: .04em; margin-left: 1mm; }

/* ---------- body ---------- */
.ds-body { flex: 1; min-height: 0; display: flex; gap: 2.5mm; padding: 2mm 3mm 1.5mm; }
.ds-left { flex: 1 1 62%; min-width: 0; overflow: hidden; font-size: var(--fsl, var(--fs)); }
.ds-right { flex: 0 0 36%; min-width: 0; overflow: hidden; font-size: var(--fsr, var(--fs)); }

table.wpn { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
table.wpn th { background: var(--c1); color: #fff; font: 700 .95em/1 var(--head); letter-spacing: .06em; text-transform: uppercase; padding: .45em .5em; text-align: center; white-space: nowrap; }
table.wpn th.n { text-align: left; font-size: 1.05em; }
table.wpn td { padding: .32em .5em; text-align: center; border-bottom: .15mm solid var(--rule); font-weight: 600; white-space: nowrap; }
table.wpn td.n { text-align: left; font-weight: 600; white-space: normal; }
table.wpn tr:nth-child(even) td { background: var(--paper2); }
table.wpn .wk { font: 700 .78em/1 var(--head); letter-spacing: .04em; text-transform: uppercase; color: var(--c1); white-space: normal; }
table.wpn td.empty { text-align: left; font-weight: 400; color: #666; font-style: italic; }

.hd { background: var(--c1); color: #fff; font: 700 1.05em/1 var(--head); letter-spacing: .06em; text-transform: uppercase; padding: .45em .6em; margin: 0 0 .5em; }
.hd.sub { margin-top: .8em; background: var(--c2); }
.ds-right p, .ds-left p { margin: 0 0 .55em; }
.ds-right ul, .ds-left ul { margin: 0 0 .55em; padding-left: 1.1em; }
.ds-right li, .ds-left li { margin: 0 0 .15em; }
.kwd { font: 700 .9em/1 var(--head); text-transform: uppercase; letter-spacing: .03em; color: var(--c1); }
.abl b.n { text-transform: uppercase; font-family: var(--head); font-size: 1.05em; letter-spacing: .02em; }

.invul { display: flex; align-items: center; gap: .6em; margin: .6em 0; padding: .35em .5em; border: .3mm solid var(--c1); background: #fff; }
.invul .hex {
  flex: none; width: 2.9em; height: 2.6em; display: flex; align-items: center; justify-content: center; position: relative;
  background: var(--c1); clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); color: #fff; font: 700 1.35em/1 var(--head);
}
.invul .lbl { font: 700 1em/1.1 var(--head); text-transform: uppercase; letter-spacing: .06em; }
.invul .lbl small { display: block; font: 400 .8em/1.2 var(--body); text-transform: none; letter-spacing: 0; }
.dmg { margin: .6em 0; border: .3mm solid var(--c1); background: #fff; }
.dmg .hd { margin: 0; }
.dmg p { padding: .4em .6em; margin: 0; }

/* ---------- keyword bar ---------- */
.ds-foot { flex: none; display: flex; min-height: 6.5mm; font-family: var(--head); text-transform: uppercase; }
.ds-foot > div { padding: 1.2mm 3mm; display: flex; align-items: center; line-height: 1.15; }
.ds-foot .kw { flex: 1; background: var(--paper2); color: var(--ink); border-top: .3mm solid var(--c2); }
.ds-foot .fkw { flex: 0 0 34%; background: var(--c2); color: #fff; }
.ds-foot i { font-style: normal; font-weight: 500; font-size: .85em; letter-spacing: .06em; opacity: .85; }
.ds-foot b { font-weight: 700; font-size: 1.05em; letter-spacing: .02em; }

/* ---------- back ---------- */
.ds.back .ds-head { padding-bottom: 2.2mm; }
.ds.back .ds-sub { font: 700 2.8mm/1 var(--head); letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 1.4mm; }
.ds.back .ds-left, .ds.back .ds-right { flex: 1 1 50%; }
table.pts { width: 100%; border-collapse: collapse; margin: 0 0 .8em; }
table.pts td { padding: .3em .6em; border-bottom: .15mm solid var(--rule); font-weight: 600; }
table.pts td:last-child { text-align: right; white-space: nowrap; }
table.pts tr:nth-child(even) td { background: var(--paper2); }