/* ── cards.css ── */
/* 63×88mm card fronts/backs shared by builder.html deck printing and
   character.html "print spell cards" (character-print.js printSpellCards()).
   This file was referenced by both pages but missing from the repo — every
   .card-front/.cf-* /.card-back/.cb-* class rendered unstyled. Recreated to
   match the app's parchment/gold design system (style.css variables). */

/* ── On-screen preview grid (builder.html "Предпросмотр") ── */
.card-preview-section { width: 100%; max-width: 900px; }

.preview-label {
  color: var(--gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
  text-align: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

/* ── Card front ── */
/*noinspection CssNoGenericFontName*/
.card-front {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-shadow:
    0 0 0 2px var(--card-outline1),
    0 0 0 3px var(--card-outline2),
    0 4px 16px var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font-body);
  aspect-ratio: 63 / 88;
}

.cf-header {
  padding: 0.5rem 0.6rem 0.45rem;
  color: #f4e8c1;
}
.cf-type-badge {
  font-family: var(--font-heading-sm);
  font-size: 0.55rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.15rem;
}
.cf-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cf-subtitle {
  font-size: 0.68rem;
  font-style: italic;
  opacity: 0.85;
  margin-top: 0.1rem;
}

.cf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--entry-border);
  background: var(--desc-bg);
}
.cf-stat { display: flex; flex-direction: column; font-size: 0.6rem; line-height: 1.3; }
.cf-stat-label { font-family: var(--font-heading-sm); color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.55rem; }
.cf-stat-val { color: var(--ink); }

.cf-recharge {
  padding: 0.2rem 0.6rem;
  font-size: 0.62rem;
  font-style: italic;
  color: var(--red);
  border-bottom: 1px solid var(--entry-border);
}

.cf-description {
  flex: 1;
  padding: 0.5rem 0.6rem;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--ink);
  overflow: hidden;
}

.cf-upcast {
  padding: 0.35rem 0.6rem;
  font-size: 0.62rem;
  line-height: 1.4;
  border-top: 1px solid var(--entry-border);
  color: var(--ink-dim);
}
.cf-upcast-label { font-weight: bold; color: var(--red); }

.cf-attunement {
  padding: 0 0.6rem 0.3rem;
  font-size: 0.6rem;
  font-style: italic;
  color: var(--ink-dim);
}

.cf-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem 0.45rem;
  border-top: 1px solid var(--entry-border);
}
.cf-tag {
  font-family: var(--font-heading-sm);
  font-size: 0.52rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4e8c1;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
}
.cf-source {
  margin-left: auto;
  font-size: 0.55rem;
  font-style: italic;
  color: var(--ink-dim);
}

/* ── Card back ──
   Print-safe by construction: the base fill is plain white (set inline by
   render.js), accent color lives only on the border/lines/ornament — see
   PLAN.md 0.5. print-color-adjust keeps that accent visible in print. */
.card-back {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 63 / 88;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.cb-border-outer {
  position: absolute;
  inset: 5px;
  border: 2px solid;
  border-radius: 4px;
}
.cb-border-inner {
  position: absolute;
  inset: 10px;
  border: 1px solid;
  border-radius: 3px;
  opacity: 0.6;
}
.cb-hline {
  position: absolute;
  left: 22px; right: 22px; top: 50%;
  height: 1px;
  transform: translateY(-50%);
  opacity: 0.35;
}
.cb-vline {
  position: absolute;
  top: 22px; bottom: 22px; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  opacity: 0.35;
}
.cb-ornament {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-diamond {
  width: 34px; height: 34px;
  border: 2px solid;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-diamond-icon { transform: rotate(-45deg); font-size: 0.9rem; }
.cb-corner { position: absolute; font-size: 0.7rem; opacity: 0.8; }
.cb-tl { top: 10px; left: 10px; }
.cb-tr { top: 10px; right: 10px; }
.cb-bl { bottom: 10px; left: 10px; }
.cb-br { bottom: 10px; right: 10px; }

/* ── Print layout ── */
#print-container { display: none; }
.print-card-placeholder { visibility: hidden; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  body * { visibility: hidden; }
  #print-container, #print-container * { visibility: visible; }
  #print-container {
    display: block;
    position: absolute;
    inset: 0;
  }
  .print-page {
    width: 210mm;
    height: 297mm;
    padding: 16.5mm 10.5mm;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 63mm);
    grid-template-rows: repeat(3, 88mm);
    justify-content: center;
    page-break-after: always;
  }
  .print-page:last-child { page-break-after: auto; }
  .card-front, .card-back {
    border-radius: 0;
    box-shadow: none;
  }
}