/* lib/card-face.css — the canonical "classic" card face (#657).
   Single source of truth for the .card-classic look agreed in the
   april-homepage game-type preview: a centered image, large stacked corner
   index (rank over suit) top-left + rotated bottom-right, bold name, an
   uppercase letter-spaced subtheme line, and a subtle inner frame.

   Loaded by every surface that renders a classic card (print.html,
   gallery.html, create.html). lib/render-card.js + create.html emit the
   matching .card-classic / .cc-* markup — keep the class names in sync.

   Scaling: .card-classic is a query container (container-type: inline-size)
   and its children size themselves in cqw, so ONE set of rules scales from
   the small create gallery tile up to the larger print sheet without any
   per-surface overrides. Reference proportions come from the homepage card
   (~178px wide); cqw is content-box relative, hence the ~1.15× factor baked
   into the values below. */

.card-classic {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 6.7%;
  background: #fff;
  color: #1a1a1a;
  overflow: hidden;
}

/* Subtle inner frame — sits between the card edge and the content. */
.card-classic::before {
  content: '';
  position: absolute;
  inset: 5cqw;
  border: 1px solid #f2dddb;
  border-radius: 5cqw;
  pointer-events: none;
}

/* Stacked rank-over-suit index. Top-left in flow; bottom-right pinned and
   rotated 180° like a real playing card's lower corner. */
.card-classic .cc-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
  color: #1a1a1a;
}
.card-classic .cc-corner.is-red { color: #b0211b; }
.card-classic .cc-corner.cc-tl { margin-right: auto; }
.card-classic .cc-corner.cc-br {
  margin-top: auto;
  margin-left: auto;
  transform: rotate(180deg);
}
.card-classic .cc-rank { font-size: 14.3cqw; letter-spacing: -0.02em; }
.card-classic .cc-suit { font-size: 10.4cqw; margin-top: 1.3cqw; }

/* Centered image + name + subtheme. */
.card-classic .cc-center {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.card-classic .cc-portrait {
  width: 85%;
  max-width: 85%;
  max-height: 78%;
  height: auto;
  object-fit: contain;
  border-radius: 3cqw;
  display: block;
}
.card-classic .cc-name {
  font-size: 11cqw;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 6cqw;
  max-width: 100%;
  overflow-wrap: anywhere;
  /* Clamp to 2 lines so a long name can't push the corners/frame around;
     mirrors the PDF renderer truncating the name (print-pdf.js renderClassic). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-classic .cc-meta {
  font-size: 5.8cqw;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-top: 2.6cqw;
  max-width: 100%;
  overflow-wrap: anywhere;
  /* One line, matching the PDF's subtheme truncation. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dark pattern background (the create.html finalize font/pattern showcase):
   flip the whole face to light text so the index + subtheme stay readable.
   Red corners stay red. Toggled via .is-on-dark in populatePreviewCard. */
.card-classic.is-on-dark { color: #fff; }
.card-classic.is-on-dark .cc-corner:not(.is-red),
.card-classic.is-on-dark .cc-meta { color: #fff; }