/*
 * NEXTUP card template: one stylesheet for the builder preview, the storefront
 * showcase and the print files. Everything is sized in container units (cqw) of
 * .nxc, which is the FULL card including bleed (2.75 x 3.75 in for a
 * 2.5 x 3.5 in trading card with 0.125 in bleed), so the card scales to any size
 * and prints at any DPI without layout changes.
 *
 *   1 in        = 36.3636cqw
 *   bleed       = 4.5455cqw   (0.125 in)
 *   safe inset  = 9.0909cqw   (bleed + 0.125 in safe margin)
 *   card height = 136.3636cqw
 */

@font-face {
  font-family: "NX Inter";
  src: url("/nextup_cards/static/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NX Inter";
  src: url("/nextup_cards/static/fonts/Inter-Variable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "NX Fraunces";
  src: url("/nextup_cards/static/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NX Fraunces";
  src: url("/nextup_cards/static/fonts/Fraunces-Variable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Trim viewport: what customers see (bleed hidden, rounded like a real card). */
.nxc-trim {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  overflow: hidden;
  border-radius: 4.5% / 3.2%;
  isolation: isolate;
}
.nxc-trim > .nxc {
  position: absolute;
  width: 110%;          /* 2.75 / 2.5 */
  left: -5%;
  top: -3.5714%;        /* 0.125 / 3.5 */
}

.nxc {
  --in: 36.3636cqw;
  --bleed: 4.5455cqw;
  --safe: 9.0909cqw;
  --accent: #d7ac64;
  --dark: #183a59;
  --ink: #0f1d33;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 2.75 / 3.75;
  overflow: hidden;
  font-family: "NX Inter", Inter, ui-sans-serif, system-ui, sans-serif;
  color: #fff;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.nxc * { box-sizing: border-box; }

/* ---------- shared layers ---------- */
.nxc-bg, .nxc-sheen, .nxc-lines { position: absolute; inset: 0; }
.nxc-frame {
  position: absolute;
  inset: var(--safe);
  border: 0.45cqw solid rgba(255, 255, 255, 0.55);
  border-radius: 2.2cqw;
  pointer-events: none;
}
.nxc-wordmark {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* ---------- FRONT ---------- */
.nxc-front .nxc-number-bg {
  position: absolute;
  right: 11cqw;
  top: 22cqw;
  font-size: 34cqw;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.2);
}
.nxc-front .nxc-photo-wrap {
  position: absolute;
  left: var(--bleed);
  right: var(--bleed);
  top: 29cqw;
  bottom: 31.5cqw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.nxc-front .nxc-photo {
  display: block;
  max-width: none;
  height: 112%;
  width: auto;
  object-fit: contain;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 1.6cqw 2.4cqw rgba(0, 0, 0, 0.35));
}
.nxc-front .nxc-photo-empty {
  position: absolute;
  inset: 26% 18% 8%;
  border: 0.5cqw dashed rgba(255, 255, 255, 0.55);
  border-radius: 3cqw;
  display: grid;
  place-items: center;
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}
.nxc-front .nxc-top {
  position: absolute;
  left: 12.5cqw;
  right: 12.5cqw;
  top: 12.5cqw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.nxc-front .nxc-wordmark { font-size: 6.8cqw; }
.nxc-front .nxc-badge {
  font-size: 2.05cqw;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 1cqw 1.9cqw;
  margin-top: 0.6cqw;
  border: 0.35cqw solid rgba(255, 255, 255, 0.6);
  border-radius: 99cqw;
  white-space: nowrap;
}
.nxc-front .nxc-meta {
  position: absolute;
  left: 12.5cqw;
  top: 21.5cqw;
  font-size: 2.5cqw;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}
.nxc-front .nxc-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33cqw;
  padding: 6.2cqw 12.5cqw calc(var(--safe) + 2.6cqw);
  background: linear-gradient(180deg, #0c1628 0%, #070d18 100%);
  border-top: 0.8cqw solid var(--accent);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 3cqw;
  align-content: start;
}
.nxc-front .nxc-name {
  grid-column: 1;
  font-size: 8.2cqw;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.nxc-front .nxc-num {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 11cqw;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--accent);
}
.nxc-front .nxc-sub {
  grid-column: 1;
  margin-top: 2.2cqw;
  font-size: 2.55cqw;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}

/* ---------- BACK ---------- */
.nxc-back .nxc-bg { background: linear-gradient(170deg, #f7f9fb 0%, #e6ecf2 100%); }
.nxc-back { color: var(--ink); }
.nxc-back .nxc-frame { border-color: rgba(15, 29, 51, 0.16); }
.nxc-back .nxc-body {
  position: absolute;
  inset: calc(var(--safe) + 3.6cqw) calc(var(--safe) + 3.6cqw);
  display: flex;
  flex-direction: column;
}
.nxc-back .nxc-back-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 2.6cqw;
  border-bottom: 0.35cqw solid rgba(15, 29, 51, 0.14);
}
.nxc-back .nxc-wordmark { font-size: 5.4cqw; }
.nxc-back .nxc-edition {
  font-size: 2.2cqw;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink, #8a6a2f);
}
.nxc-back .nxc-name {
  margin-top: 4.2cqw;
  font-size: 8.4cqw;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.nxc-back .nxc-sub {
  margin-top: 1.8cqw;
  font-size: 2.45cqw;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(15, 29, 51, 0.62);
}
.nxc-back .nxc-sub + .nxc-sub { margin-top: 0.8cqw; }
.nxc-back .nxc-story {
  margin-top: 4.4cqw;
  padding-top: 3.4cqw;
  border-top: 0.35cqw solid rgba(15, 29, 51, 0.14);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.nxc-back .nxc-headline {
  font-size: 2.45cqw;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink, #8a6a2f);
}
.nxc-back .nxc-message {
  margin: 2cqw 0 0;
  font-family: "NX Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 420;
  font-size: 4.3cqw;
  line-height: 1.32;
  color: #18233a;
  overflow-wrap: anywhere;
}
.nxc-back .nxc-from {
  margin-top: 1.8cqw;
  font-size: 2.5cqw;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 29, 51, 0.62);
}
.nxc-back .nxc-stats {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), 1fr);
  gap: 1.6cqw;
  margin-top: 3cqw;
}
.nxc-back .nxc-stat {
  padding: 1.8cqw 1cqw 1.5cqw;
  border-radius: 1.6cqw;
  background: rgba(15, 29, 51, 0.06);
  text-align: center;
}
.nxc-back .nxc-stat b {
  display: block;
  font-size: 5cqw;
  font-weight: 900;
  line-height: 1;
}
.nxc-back .nxc-stat small {
  display: block;
  margin-top: 0.9cqw;
  font-size: 1.85cqw;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 29, 51, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nxc-back .nxc-back-foot {
  margin-top: 3cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
}
.nxc-back .nxc-qr {
  flex: 0 0 15cqw;
  width: 15cqw;
  height: 15cqw;
  border-radius: 1.4cqw;
  background: #fff;
  padding: 1cqw;
  box-shadow: inset 0 0 0 0.3cqw rgba(15, 29, 51, 0.12);
}
.nxc-back .nxc-qr svg, .nxc-back .nxc-qr img { display: block; width: 100%; height: 100%; }
.nxc-back .nxc-qr-placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(15,29,51,.75) 0 30%, transparent 30% 70%, rgba(15,29,51,.75) 70%) 0 0 / 100% 30% no-repeat,
    linear-gradient(90deg, rgba(15,29,51,.75) 0 30%, transparent 30%) 0 100% / 100% 30% no-repeat,
    repeating-linear-gradient(45deg, rgba(15,29,51,.35) 0 1cqw, transparent 1cqw 2cqw);
  border-radius: 0.6cqw;
}
.nxc-back .nxc-foot-copy {
  font-size: 2.1cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(15, 29, 51, 0.6);
}
.nxc-back .nxc-foot-copy strong { display: block; color: var(--ink); letter-spacing: 0.12em; text-transform: uppercase; }
.nxc-back .nxc-ref { margin-left: auto; font-size: 1.8cqw; font-weight: 700; letter-spacing: 0.1em; color: rgba(15, 29, 51, 0.45); }

/* ---------- design: SIGNATURE (clean silver) ---------- */
.nxc[data-design="signature"] .nxc-bg {
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.55) 52%, transparent 60%),
    linear-gradient(165deg, #f4f7fa 0%, #d6dfe9 48%, #9eb0c3 100%);
}
.nxc-front[data-design="signature"] { color: var(--ink); }
.nxc-front[data-design="signature"] .nxc-number-bg { color: rgba(15, 29, 51, 0.1); }
.nxc-front[data-design="signature"] .nxc-badge { border-color: rgba(15, 29, 51, 0.35); }
.nxc-front[data-design="signature"] .nxc-frame { border-color: rgba(255, 255, 255, 0.9); }
.nxc-front[data-design="signature"] .nxc-plate { color: #fff; }
.nxc-front[data-design="signature"] .nxc-photo-empty { color: rgba(15,29,51,.7); border-color: rgba(15,29,51,.35); }

/* ---------- design: CHROME (iridescent refractor) ---------- */
.nxc[data-design="chrome"] .nxc-bg {
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.45) 44%, transparent 52%),
    conic-gradient(from 210deg at 70% 30%, #9fd2f5, #c9b8ee, #8ae0d5, #f2c6e4, #9fd2f5),
    #6f87b5;
}
.nxc[data-design="chrome"] .nxc-lines {
  background: linear-gradient(180deg, transparent 50%, rgba(20, 30, 70, 0.55) 100%);
}
.nxc-front[data-design="chrome"] .nxc-plate { background: linear-gradient(90deg, #1b2350 0%, #2b2f6d 100%); }
.nxc-front[data-design="chrome"] .nxc-frame { border-color: rgba(255, 255, 255, 0.75); }
.nxc-back[data-design="chrome"] .nxc-bg {
  background:
    linear-gradient(170deg, rgba(255,255,255,.9), rgba(255,255,255,.82)),
    conic-gradient(from 210deg at 70% 30%, #9fd2f5, #c9b8ee, #8ae0d5, #f2c6e4, #9fd2f5);
}
.nxc-back[data-design="chrome"] { --accent-ink: #4c4aa0; }

/* ---------- design: ULTIMATE (midnight gold) ---------- */
.nxc[data-design="ultimate"] { --gold: #e3be76; }
.nxc[data-design="ultimate"] .nxc-bg {
  background: radial-gradient(120% 90% at 30% 18%, #4b3524 0%, #1c1511 55%, #090706 100%);
}
.nxc[data-design="ultimate"] .nxc-lines {
  background: repeating-linear-gradient(118deg, transparent 0 9cqw, rgba(227, 190, 118, 0.14) 9cqw 9.25cqw);
}
.nxc-front[data-design="ultimate"] .nxc-number-bg { color: rgba(227, 190, 118, 0.16); }
.nxc-front[data-design="ultimate"] .nxc-frame,
.nxc-front[data-design="ultimate"] .nxc-badge { border-color: var(--gold); color: var(--gold); }
.nxc-front[data-design="ultimate"] .nxc-wordmark,
.nxc-front[data-design="ultimate"] .nxc-meta { color: var(--gold); }
.nxc-front[data-design="ultimate"] .nxc-plate {
  background: linear-gradient(180deg, #120e0b 0%, #070504 100%);
  border-top-color: var(--gold);
  color: #f6e6c4;
}
.nxc-front[data-design="ultimate"] .nxc-num { color: var(--gold); }
.nxc-back[data-design="ultimate"] { color: #f6e6c4; --ink: #f6e6c4; --accent-ink: #e3be76; }
.nxc-back[data-design="ultimate"] .nxc-bg { background: radial-gradient(120% 90% at 30% 18%, #3a291c 0%, #17110d 60%, #090706 100%); }
.nxc-back[data-design="ultimate"] .nxc-frame { border-color: rgba(227, 190, 118, 0.7); }
.nxc-back[data-design="ultimate"] .nxc-back-top,
.nxc-back[data-design="ultimate"] .nxc-story { border-color: rgba(227, 190, 118, 0.3); }
.nxc-back[data-design="ultimate"] .nxc-sub,
.nxc-back[data-design="ultimate"] .nxc-from,
.nxc-back[data-design="ultimate"] .nxc-foot-copy,
.nxc-back[data-design="ultimate"] .nxc-stat small { color: rgba(246, 230, 196, 0.7); }
.nxc-back[data-design="ultimate"] .nxc-message { color: #f6e6c4; }
.nxc-back[data-design="ultimate"] .nxc-stat { background: rgba(227, 190, 118, 0.1); }
.nxc-back[data-design="ultimate"] .nxc-ref { color: rgba(246, 230, 196, 0.45); }

/* ---------- standard (share) cards: same design, no special-finish effects ---------- */
.nxc[data-variant="standard"] .nxc-sheen { display: none; }

/* ---------- live preview only: moving light on premium finishes ---------- */
.nxc[data-variant="premium"][data-live] .nxc-sheen {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.32) 47%, transparent 58%);
  background-size: 250% 100%;
  background-position: var(--sheen-x, 80%) 0;
  mix-blend-mode: overlay;
  transition: background-position 0.25s ease-out;
}

/* ---------- foil mask export: black = foil, white = no foil ---------- */
.nxc[data-mode="mask"] { background: #fff !important; }
.nxc[data-mode="mask"] > :not(.nxc-foil-layer) { visibility: hidden !important; }
.nxc[data-mode="mask"] .nxc-foil-layer { visibility: visible; }
.nxc-foil-layer { display: none; position: absolute; inset: 0; }
.nxc[data-mode="mask"] .nxc-foil-layer { display: block; }
.nxc-foil-layer .nxc-frame { border-color: #000 !important; }
.nxc-foil-layer .nxc-foil-rule {
  position: absolute; left: 0; right: 0; bottom: 33cqw; height: 0.8cqw; background: #000;
}
.nxc-foil-layer .nxc-foil-word {
  position: absolute; left: 12.5cqw; top: 12.5cqw; font-size: 6.8cqw; color: #000 !important;
}
.nxc-foil-layer .nxc-foil-num {
  position: absolute; right: 12.5cqw; bottom: calc(var(--safe) + 6cqw);
  font-size: 11cqw; font-weight: 900; font-style: italic; letter-spacing: -0.05em; color: #000;
}

@media (prefers-reduced-motion: reduce) {
  .nxc[data-live] .nxc-sheen { transition: none; }
}