/* Carta de monstruo — tarot, blanco y negro, estilo old-school.
   Motivo común: doble filete (grueso + fino) y rombos, en marco, títulos y separadores. */
.card {
  --fs: 8pt;
  --pad: 3.5mm;
  --rule: .45mm;
  position: relative;
  width: var(--w);
  height: var(--h);
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-family: "Jost", "Futura", system-ui, sans-serif;
  border-radius: 3.5mm;
  padding: var(--pad);
  container-type: size;
  display: flex;
  flex-direction: column;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.card *, .card *::before, .card *::after { box-sizing: border-box; }
.card h1, .card h2, .card h3, .card p, .card dl, .card dd { margin: 0; }
.card.overflow::after {
  content: "texto desbordado";
  position: absolute; right: 2mm; bottom: 1.5mm; z-index: 5;
  font: 700 5.5pt system-ui, sans-serif; color: #fff; background: #c0392b;
  padding: .3mm 1.2mm; border-radius: 1mm;
}

/* ---------- Títulos de sección: versalitas + doble filete ---------- */
.card .sec {
  font-family: "Oswald", "Impact", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; line-height: 1.1;
  padding-bottom: .8mm;
  border-bottom: var(--rule) solid #111;
  /* filete fino sobre el grueso */
  background: linear-gradient(to top, transparent .3mm, #111 .3mm, #111 .5mm, transparent .5mm) bottom / 100% .5mm no-repeat;
  margin-bottom: 1.2mm;
}

/* ---------- Nombre: centrado, doble filete con rombo central ---------- */
.card .title, .card .back-head {
  flex: none; position: relative; text-align: center;
  padding: 1.2mm 0 2.6mm;
  border-bottom: .7mm solid #111;
  background: linear-gradient(to top, transparent .4mm, #111 .4mm, #111 .65mm, transparent .65mm) bottom / 100% .65mm no-repeat;
  margin-bottom: 2.6mm;
}
.card .title::after, .card .back-head::after {
  content: ""; position: absolute; left: 50%; bottom: -1.05mm;
  width: 2.1mm; height: 2.1mm; margin-left: -1.05mm;
  transform: rotate(45deg);
  background: #111; border: .45mm solid #111; box-shadow: inset 0 0 0 .4mm #fff;
}
.card .title p, .card .back-head p { font-size: 3.5cqw; line-height: 1.2; letter-spacing: .02em; }
.card .title h1, .card .back-head h2 {
  font-family: "Oswald", "Impact", sans-serif; font-weight: 700;
  font-size: 9.5cqw; line-height: 1; text-transform: uppercase; letter-spacing: .015em;
  overflow-wrap: anywhere;
}

/* ---------- Anverso ---------- */
.card-front .top {
  flex: none;
  height: 38.5cqh;
  display: grid;
  grid-template-columns: 31% 1fr 28%;
  column-gap: 2.4mm;
}
.card-front .top .sec { font-size: 3.7cqw; margin-bottom: 1mm; }
.card-front dl { margin-bottom: 1.6mm; }
.card-front dl > div { display: flex; justify-content: space-between; gap: 1mm; font-size: 3.85cqw; line-height: 1.18; }
.card-front dt { font-weight: 700; flex: none; }
.card-front dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.card-front .col-left, .card-front .col-right { overflow: hidden; padding-top: .8mm; }
.card-front .saves > div, .card-front .enc > div { justify-content: flex-start; }
.card-front .saves dt { width: 4cqw; }
.card-front .enc dt { width: 8.5cqw; }
.card-front .enc dd { text-align: left; }
.card-front .save-as { font-size: 3.2cqw; font-style: italic; margin: -1mm 0 1.6mm; }

.card-front .portrait { position: relative; min-height: 0; display: flex; }
.card-front .pimg { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.card-front .pimg img {
  position: absolute; inset: 0; /* el tamaño real de la imagen no altera la rejilla */
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) contrast(1.15); user-select: none;
}
.card-front .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: .3mm dashed #aaa; border-radius: 1mm;
  background: repeating-linear-gradient(135deg, #fff 0 1.2mm, #f1f1f1 1.2mm 1.6mm);
}
.card-front .ph span {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 24cqw;
  color: #fff; -webkit-text-stroke: .35mm #bbb;
}

/* Marco OSR: filete grueso exterior, filete fino interior, cantoneras y rombos a mitad de lado */
.card-front .portrait.framed { --o: 1.3mm; --ow: .55mm; padding: 3mm; }
.card-front .portrait.framed::before {
  content: ""; position: absolute; inset: var(--o); pointer-events: none;
  border: var(--ow) solid #111;
}
.card-front .portrait.framed::after {
  content: ""; position: absolute; inset: calc(var(--o) + .85mm); pointer-events: none;
  border: .18mm solid #111;
}
.card-front .portrait.framed .ph { border: 0; border-radius: 0; }
.card-front .orn { position: absolute; z-index: 2; display: block; line-height: 0; }
.card-front .orn svg { display: block; width: 100%; height: 100%; }
.card-front .orn.corner { --s: 3.3mm; width: var(--s); height: var(--s); }
.card-front .orn.mid { --s: 2.6mm; width: var(--s); height: var(--s); }
/* centra cada ornamento sobre la línea media del filete exterior */
.card-front .orn { --c: calc(var(--o) + var(--ow) / 2 - var(--s) / 2); }
.card-front .orn.tl { top: var(--c); left: var(--c); }
.card-front .orn.tr { top: var(--c); right: var(--c); }
.card-front .orn.bl { bottom: var(--c); left: var(--c); }
.card-front .orn.br { bottom: var(--c); right: var(--c); }
.card-front .orn.t { top: var(--c); left: calc(50% - var(--s) / 2); }
.card-front .orn.b { bottom: var(--c); left: calc(50% - var(--s) / 2); }
.card-front .orn.l { left: var(--c); top: calc(50% - var(--s) / 2); }
.card-front .orn.r { right: var(--c); top: calc(50% - var(--s) / 2); }

.card .body, .card .back-body {
  flex: 1; min-height: 0; overflow: hidden;
  font-size: var(--fs); line-height: 1.26;
  text-align: justify; hyphens: auto;
}
.card .body .sec, .card .back-body .sec { font-size: 1.05em; text-align: left; }
.card .body section, .card .back-body section { margin-top: .8em; }
.card .body > :first-child, .card .back-body > :first-child { margin-top: 0; }
.card .entry { margin-bottom: .35em; }
.card .entry b { font-weight: 700; }

/* Ataques: una fila por ataque, daño destacado a la derecha */
.card .attacks .atk {
  display: flex; align-items: center; gap: 1.5mm;
  padding: .35em 0 .35em 1.1em; position: relative;
  border-bottom: .15mm dotted #777;
  text-align: left;
}
.card .attacks .atk:last-child { border-bottom: 0; }
.card .attacks .atk::before {
  content: ""; position: absolute; left: .15em; top: 50%;
  width: .42em; height: .42em; margin-top: -.21em; background: #111; transform: rotate(45deg);
}
.card .attacks .atk-what { flex: 1; min-width: 0; font-weight: 600; }
.card .attacks .atk-dmg {
  flex: none; font-family: "Oswald", "Impact", sans-serif; font-weight: 700; font-size: 1.12em; line-height: 1;
  padding: .18em .5em .22em; border: .3mm solid #111; border-radius: .6mm; letter-spacing: .02em;
}
.card .back-body p + p { margin-top: .45em; }

/* Casillas de PG: bloques por criatura en 1–3 columnas, casillas agrupadas de 5 en 5.
   Las medidas coinciden con HP en render.js (cálculo de columnas). */
.card .hp-track { flex: none; margin-bottom: 3.2mm; }
.card .hp-track .sec { font-size: 3.4cqw; margin-bottom: 1.2mm; }
.card .hp-track .sec small { font-family: "Jost", sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .9em; }
.card .hp-grid { display: grid; grid-template-columns: repeat(var(--hp-cols), minmax(0, 1fr)); column-gap: 3mm; row-gap: 1.4mm; }
.card .hp-row { display: flex; align-items: flex-start; gap: 1mm; min-width: 0; }
.card .hp-n { font: 700 3mm/3mm "Oswald", sans-serif; width: 3.2mm; text-align: right; flex: none; }
.card .hp-boxes { display: flex; flex-wrap: wrap; gap: .9mm 1.6mm; min-width: 0; }
.card .hp-boxes .grp { display: flex; gap: .6mm; }
.card .hp-boxes i { display: block; width: 3mm; height: 3mm; border: .25mm solid #111; border-radius: .3mm; }

/* ---------- Reverso ---------- */
.card-back .back-head h2 { font-size: 8cqw; }

/* =================== MÖRK BORG =================== */
/* Blanco y negro con el amarillo como subrayador (estilo DNGNGEN): nombre en gótica centrada,
   etiquetas a máquina sobre amarillo, datos en celdas de filete fino. */
.card.mb {
  --mb-yellow: #ffe82c;
  --mb-hair: .25mm solid #000;
  background: #fff;
  color: #000;
  font-family: "Space Mono", ui-monospace, monospace;
  border-radius: 2.5mm;
}

.card.mb .mb-head { flex: none; position: relative; text-align: center; padding: .4mm 0 2mm; margin-bottom: 2mm; border-bottom: var(--mb-hair); }
.card.mb .mb-kicker { display: inline-block; font-size: 3cqw; line-height: 1.25; letter-spacing: .02em; margin-bottom: 1mm;
  background: var(--mb-yellow); padding: .1mm 1.4mm 0; }
.card.mb .mb-name {
  font-family: "UnifrakturCook", "Pirata One", serif; font-weight: 700;
  font-size: 12cqw; line-height: .95; letter-spacing: 0; overflow-wrap: anywhere;
}

.card.mb .mb-top { flex: none; height: 37cqh; display: grid; grid-template-columns: 54% 1fr; grid-template-rows: minmax(0, 1fr); margin-bottom: 2.4mm; border-bottom: var(--mb-hair); }
/* El fundido «multiplicar» va en el contenedor y no en la imagen: así el blanco del dibujo
   desaparece sobre el papel amarillo también en Safari, donde filter/transform en la imagen
   dejaban un recuadro más claro alrededor de la ilustración. */
.card.mb .mb-portrait { position: relative; min-height: 0; overflow: hidden; border-right: var(--mb-hair); margin-bottom: 2mm; mix-blend-mode: multiply; }
.card.mb .mb-portrait img {
  position: absolute; inset: 0 1.5mm 0 0; display: block; width: calc(100% - 1.5mm); height: 100%; object-fit: contain;
  filter: grayscale(1) contrast(1.5) brightness(1.04); user-select: none;
}
.card.mb .ph { position: absolute; inset: 0 1.5mm 0 0; display: grid; place-items: center;
  border: 0; border-radius: 0; background: repeating-linear-gradient(-45deg, transparent 0 1.4mm, rgba(0,0,0,.1) 1.4mm 1.6mm); }
.card.mb .ph span { font-family: "UnifrakturCook", serif; font-weight: 700; font-size: 34cqw; line-height: 1; }

/* Datos: celdas del mismo alto; etiqueta amarilla arriba y valor grande centrado en el resto */
.card.mb .mb-stats { display: grid; grid-auto-rows: minmax(0, 1fr); min-height: 0; margin: 0 0 2mm; }
.card.mb .mb-stats > div { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: .9mm 0 .4mm 1.5mm; text-align: center; }
.card.mb .mb-stats > div + div { border-top: var(--mb-hair); }
.card.mb .mb-stats dt { flex: none; font-size: 3.3cqw; line-height: 1.25; letter-spacing: .02em; background: var(--mb-yellow); padding: 0 1.2mm; }
.card.mb .mb-stats dd { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; margin: 0;
  font-family: "Jost", sans-serif; font-size: 7.6cqw; font-weight: 700; line-height: 1; text-align: center; overflow-wrap: anywhere; }
/* Con cuatro datos las celdas son más bajas */
.card.mb .mb-stats:has(> div:nth-child(4)) dd { font-size: 6.6cqw; }

/* Etiqueta de sección: subrayador amarillo, minúscula de máquina */
.card.mb .mb-tag {
  display: inline-block; margin: 0 0 .45em; padding: .08em .45em 0;
  background: var(--mb-yellow); color: #000;
  font-family: "Space Mono", monospace; font-weight: 400; font-size: .86em; letter-spacing: .02em; line-height: 1.3;
}

.card.mb .mb-body { font-variant-numeric: lining-nums; font-family: "Alegreya", Georgia, serif; font-size: calc(var(--fs) * 1.08); line-height: 1.22; text-align: left; hyphens: auto; }
.card.mb .mb-body section { margin-top: .9em; }
.card.mb .mb-body > :first-child { margin-top: 0; }
.card.mb .entry b { font-family: "Space Mono", monospace; font-size: .86em; text-transform: uppercase; letter-spacing: .04em; }

.card.mb .mb-attacks .mb-atk { display: flex; align-items: baseline; gap: 1.2mm; padding: .25em 0 .3em;
  border-bottom: var(--mb-hair); font-family: "Jost", sans-serif; font-weight: 600; font-size: .98em; }
.card.mb .mb-atk span { flex: 1; min-width: 0; }
.card.mb .mb-atk b { flex: none; font-family: "Space Mono", monospace; font-size: 1.15em; line-height: 1; text-transform: none; }

.card.mb .mb-desc p { font-size: 1.12em; line-height: 1.25; }
.card.mb .mb-desc p::first-letter { font-family: "UnifrakturCook", serif; font-weight: 700; font-size: 2.6em; float: left; line-height: .8; margin: .08em .1em 0 0; }

.card.mb .hp-track { margin-bottom: 2.6mm; }
.card.mb .hp-track .sec { font-family: "Space Mono", monospace; font-size: 3cqw; font-weight: 400; letter-spacing: .02em; text-transform: none; border: 0;
  display: inline-block; color: #000; background: var(--mb-yellow); padding: .2mm 1.2mm 0; }
.card.mb .hp-track .sec small { font-family: "Space Mono", monospace; }
.card.mb .hp-n { font-family: "Space Mono", monospace; }
.card.mb .hp-boxes i { border-color: #000; border-radius: 0; background: #fff; }

/* Ahorro de tinta: sin amarillo, las etiquetas pasan a negro con letra blanca */
.ink-save .card.mb .mb-tag, .ink-save .card.mb .mb-kicker, .ink-save .card.mb .mb-stats dt, .ink-save .card.mb .hp-track .sec {
  background: #000; color: #fff; }

/* Papel amarillo: las etiquetas se invierten (losa negra con letra amarilla) */
.card.mb.mb-yellow { background: var(--mb-yellow); }
.card.mb.mb-yellow .mb-tag, .card.mb.mb-yellow .mb-kicker, .card.mb.mb-yellow .mb-stats dt, .card.mb.mb-yellow .hp-track .sec {
  background: #000; color: var(--mb-yellow); }
.card.mb.mb-yellow .hp-boxes i { background: rgba(255,255,255,.4); }
.ink-save .card.mb.mb-yellow { background: #fff; }
.ink-save .card.mb.mb-yellow .mb-tag, .ink-save .card.mb.mb-yellow .mb-kicker,
.ink-save .card.mb.mb-yellow .mb-stats dt, .ink-save .card.mb.mb-yellow .hp-track .sec { background: #000; color: #fff; }

/* Marco: filete grueso con otro fino por dentro, recto y sin adornos */
.card.mb.mb-framed { --pad: 5.2mm; }
.card.mb.mb-framed::before {
  content: ""; position: absolute; inset: 1.7mm; pointer-events: none;
  border: .7mm solid #000;
  background:
    linear-gradient(#000, #000) top .5mm left .5mm / calc(100% - 1mm) .2mm no-repeat,
    linear-gradient(#000, #000) bottom .5mm left .5mm / calc(100% - 1mm) .2mm no-repeat,
    linear-gradient(#000, #000) top .5mm left .5mm / .2mm calc(100% - 1mm) no-repeat,
    linear-gradient(#000, #000) top .5mm right .5mm / .2mm calc(100% - 1mm) no-repeat;
}

/* Decoraciones de fondo (dibujos propios, muy tenues), en una capa recortada al interior del
   marco. La capa va primero en el DOM y el contenido se posiciona sin z-index, para no crear
   contextos de apilamiento que romperían el fundido de la ilustración. */
.card.mb > * { position: relative; }
.card.mb > .mb-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.card.mb.mb-framed > .mb-deco { inset: 2.4mm; border-radius: 0; }
.card.mb.mb-deco-tally .mb-deco { opacity: .055; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 8l1 16M13 7l0 17M18 8l-1 16M23 7l1 17M4 21l23-11M38 34l-1 15M43 33l1 16M48 34l0 15M34 47l18-10M40 6l12 12M52 6 40 18M8 40l2 12M14 39l-1 13'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 30mm 30mm repeat; }
.card.mb.mb-deco-splatter .mb-deco { opacity: .085;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cpath d='M50 26c9-2 13 7 20 6 6 0 9 6 5 11-4 4 3 9-2 14-4 4-9 1-12 6-4 6-11 5-14 0-3-4-10-2-12-8-2-5 4-8 2-13-2-6 4-10 9-8 2 1 2-7 4-8Z'/%3E%3Ccircle cx='86' cy='22' r='4'/%3E%3Ccircle cx='17' cy='74' r='3'/%3E%3Ccircle cx='80' cy='80' r='2.5'/%3E%3Ccircle cx='24' cy='20' r='2'/%3E%3Ccircle cx='92' cy='55' r='1.6'/%3E%3Ccircle cx='8' cy='44' r='1.8'/%3E%3Ccircle cx='66' cy='93' r='1.5'/%3E%3Crect x='47' y='60' width='3.2' height='34' rx='1.6'/%3E%3Crect x='60' y='58' width='2.4' height='20' rx='1.2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cpath d='M45 30c8-4 18 2 20 9 3 7 12 9 8 17-3 6-11 4-15 10-4 5-13 4-16-2-3-5-12-6-11-14 1-6 8-6 9-12 0-5 1-6 5-8Z'/%3E%3Ccircle cx='15' cy='30' r='3.5'/%3E%3Ccircle cx='84' cy='76' r='2.5'/%3E%3Ccircle cx='30' cy='84' r='2'/%3E%3Ccircle cx='76' cy='14' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 70% auto, 55% auto; background-position: 118% -8%, -16% 104%; }
.ink-save .card.mb.mb-deco-tally .mb-deco, .ink-save .card.mb.mb-deco-splatter .mb-deco { opacity: .045; }

/* Reverso: inicial gótica gigante de fondo */
.card-back.mb .mb-ghost {
  position: absolute; right: -6mm; bottom: -14mm;
  font-family: "UnifrakturCook", serif; font-weight: 700; font-size: 75cqw; line-height: 1; color: rgba(0,0,0,.06);
}
.card-back.mb.mb-framed .mb-ghost { right: -4mm; bottom: -12mm; }