/* card.css — shared Athlete Card styles (used by card.html sandbox + index.html app).
 * Card visuals + the signature-capture modal. Host pages own their own page chrome
 * (body, toolbar, preview scaling). Export-hide rules key off an ancestor `.exporting`
 * class so any host can neutralize UI affordances during the 300 DPI capture. */

@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/anton.woff2") format("woff2");
}
@font-face {
  font-family: 'League Gothic';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/leaguegothic.woff2") format("woff2");
}
@font-face {
  /* Signature-script fallback for the autograph when the user doesn't sign.
     Self-hosted (OFL) so it's consistent across devices + keeps Groq the only external call. */
  font-family: 'Allura';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/allura.woff2") format("woff2");
}

:root {
  --navy: #0B1D33;
  --navy-deep: #081325;
  --navy-soft: #13294a;
  --navy-line: #21406a;
  --gold: #D4AF37;
  --gold-bright: #e7c860;
  --paper: #f3eddf;
  --ink: #0a0a0a;
  /* Team color — set per card via data (renderCard writes it on the card element). */
  --team: #C8102E;
}

/* Card uses inch units + border-box padding math; scope it so we don't clobber the host. */
.card, .card *, .sig-modal, .sig-modal * { box-sizing: border-box; }

.card {
  position: relative;
  width: 6in;
  height: 8in;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, var(--navy-soft), var(--navy) 55%, var(--navy-deep));
  color: #fff;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05);
  border-radius: 0.14in;
  display: flex;
  flex-direction: column;
}

/* Gold edge accent — a real border (not an inset box-shadow): html2canvas
   renders inset shadows as a flat translucent fill over the whole card, which
   washed out the export. A border draws cleanly through the render. */
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 0.14in;
  pointer-events: none;
  border: 0.03in solid rgba(212,175,55,0.55);
}

/* ── Top brand bar ── */
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2in 0.26in 0.12in;
  z-index: 2;
}
.card-mark { height: 0.42in; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.card-team {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11pt;
  color: var(--gold);
  text-align: right;
  line-height: 1.1;
}

/* ── Photo ── */
.card-photo {
  position: relative;
  flex: 1 1 auto;
  margin: 0 0.26in;
  border-radius: 0.08in;
  overflow: hidden;
  /* Team-color duotone base (real photo set as background-image on top via data). */
  background:
    linear-gradient(160deg, rgba(212,175,55,0.12), transparent 40%),
    linear-gradient(200deg, var(--team) -10%, var(--navy-deep) 70%);
  background-size: cover;
  background-position: center top;
}
/* When a real photo is present, overlay the team duotone for a consistent look. */
.card-photo.has-img {
  background-blend-mode: normal;
}
/* Halftone dot texture (broadcast feel) */
.card-photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.4px);
  background-size: 8px 8px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(120deg, #000 25%, transparent 78%);
  mask-image: linear-gradient(120deg, #000 25%, transparent 78%);
}
.card-photo-hint {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'League Gothic', sans-serif;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 11pt; color: rgba(255,255,255,0.4);
}
.card-photo.has-img .card-photo-hint { display: none; }
/* Natural-photo look: drop the halftone dot texture once a real photo is in. */
.card-photo.has-img::before, .second-photo.has-img::before { display: none; }
/* Bottom scrim so the nameplate reads over any photo */
.card-photo-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(8,19,37,0.92));
}
.card-nameplate {
  position: absolute; left: 0.22in; right: 0.22in; bottom: 0.18in;
  z-index: 2;
}
.card-pos {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12pt;
  color: var(--gold);
  margin-bottom: 0.02in;
}
.card-name {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 42pt;
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
/* Team-color underline accent */
.card-name-rule {
  width: 1.1in; height: 0.045in;
  background: var(--team);
  margin-top: 0.08in;
}

/* ── Stat tiles (sport-specific) ── */
.card-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.07in;
  padding: 0.16in 0.26in 0.1in;
}
.stat {
  background: var(--navy-soft);
  border: 0.5px solid var(--navy-line);
  border-radius: 0.06in;
  padding: 0.1in 0.05in;
  text-align: center;
}
.stat b {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 22pt;
  line-height: 0.9;
  color: var(--gold);
}
.stat span {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 8.5pt;
  color: rgba(255,255,255,0.6);
}

/* ── Footer ── */
.card-foot {
  padding: 0 0.26in 0.2in;
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 8.5pt;
  color: rgba(255,255,255,0.5);
  display: flex;
  justify-content: space-between;
}
.card-foot .tag { color: var(--gold); }

/* ════════════════ BACK ════════════════ */
.card-back { padding: 0.26in; gap: 0.16in; }

/* Header: small repeat of identity so the back stands alone */
.back-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--navy-line);
  padding-bottom: 0.1in;
}
.back-name {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 21pt;
  line-height: 0.9;
}
.back-name .sub {
  display: block;
  font-family: 'League Gothic', sans-serif;
  font-size: 10pt;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-top: 0.03in;
}
.back-mark { height: 0.34in; width: auto; opacity: 0.9; }

/* Story excerpt */
.back-story .eyebrow {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9pt;
  color: var(--gold);
  margin-bottom: 0.05in;
}
.back-quote {
  font-family: 'Anton', sans-serif;
  font-size: 15pt;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.08in;
}
.back-quote::before { content: "\201C"; color: var(--team); }
.back-quote::after  { content: "\201D"; color: var(--team); }
.back-body {
  font-size: 8.5pt;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}

/* Full stat table */
.back-stats .eyebrow {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9pt;
  color: var(--gold);
  margin-bottom: 0.06in;
}
.stat-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 0.5px solid var(--navy-line);
  border-radius: 0.06in;
  overflow: hidden;
}
.stat-table .cell {
  padding: 0.07in 0.04in;
  text-align: center;
  border-right: 0.5px solid var(--navy-line);
  border-bottom: 0.5px solid var(--navy-line);
}
.stat-table .cell:nth-child(4n) { border-right: none; }
.stat-table .cell.head {
  background: var(--navy-soft);
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 8pt;
  color: rgba(255,255,255,0.6);
}
.stat-table .cell.val {
  font-family: 'Anton', sans-serif;
  font-size: 13pt;
  color: var(--gold);
}
.stat-table .cell.val.row2 { border-bottom: none; }

/* Bottom row: signature + QR voice block */
.back-bottom {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1.05in;
  gap: 0.18in;
  align-items: end;
}
/* The autograph "stage" holds either the BIG sign CTA (unsigned) or the
   captured signature (signed) — toggled by `.signed` on .sig-block. */
.sig-block .sig-stage {
  min-height: 0.62in;
  display: flex;
  align-items: flex-end;
}
/* Prominent call-to-action — IS the autograph line until the user signs. */
.sign-cta {
  width: 100%;
  min-height: 0.62in;
  display: flex; align-items: center; justify-content: center; gap: 0.08in;
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 14pt;
  color: var(--gold);
  background: rgba(212,175,55,0.10);
  border: 0.025in dashed rgba(212,175,55,0.75);
  border-radius: 0.08in;
  cursor: pointer;
}
.sign-cta .pen { font-size: 16pt; line-height: 1; }
.sign-cta:hover { background: rgba(212,175,55,0.20); }

/* Signed state: captured signature (transparent white-ink PNG) on a rule. */
.sig-signed { display: none; width: 100%; }
.sig-block.signed .sign-cta { display: none; }
.sig-block.signed .sig-signed { display: block; }
.sig-img-ink {
  height: 0.5in; width: auto; max-width: 100%;
  object-fit: contain; object-position: left bottom;
  display: block;
}
.sig-rule { height: 1px; background: rgba(255,255,255,0.45); margin-top: 0.03in; }

/* Script-name fallback: used in the PROOF when the user never signs. */
.sig-fallback {
  display: none;
  width: 100%;
  font-family: 'Allura', 'Snell Roundhand', 'Brush Script MT', cursive;
  font-size: 30pt;
  line-height: 1.05;
  color: #fff;
  padding-bottom: 0.05in;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  white-space: nowrap; overflow: hidden;
}

/* During export (ancestor .exporting): hide the CTA; fall back to the script
   name when unsigned. Host adds `.exporting` to a wrapper around the card. */
.exporting .sign-cta { display: none; }
.exporting .sig-block:not(.signed) .sig-fallback { display: block; }

.sig-label {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 8pt;
  color: rgba(255,255,255,0.55);
  margin-top: 0.05in;
}
.qr-block { text-align: center; }
.qr-box {
  width: 1.05in; height: 1.05in;
  border-radius: 0.06in;
  background: #fff;
  padding: 0.06in;
  box-shadow: 0 0 0 1px var(--navy-line);
}
/* Real raster <img> (PNG data URI) so it renders through html2canvas export. */
.qr-img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr-cap {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 7.5pt;
  line-height: 1.15;
  color: var(--gold);
  margin-top: 0.06in;
}
.qr-cap .voice { color: rgba(255,255,255,0.7); display: block; }

/* Adaptive middle: secondary photo (preferred) OR a 2nd story paragraph.
   Toggled by `.has-photo` on the back card — set from real upload data. */
.second-photo {
  position: relative;
  height: 1.35in;
  border-radius: 0.07in;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(212,175,55,0.12), transparent 45%),
    linear-gradient(210deg, var(--team) -20%, var(--navy-deep) 75%);
  background-size: cover;
  background-position: center;
}
.second-photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1px, transparent 1.4px);
  background-size: 8px 8px;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(120deg, #000 20%, transparent 80%);
  mask-image: linear-gradient(120deg, #000 20%, transparent 80%);
}
.second-photo .hint {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'League Gothic', sans-serif;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 9pt; color: rgba(255,255,255,0.4);
}
.second-photo.has-img .hint { display: none; }

.coach-quote {
  border-left: 0.03in solid var(--team);
  padding-left: 0.12in;
}
.coach-quote p {
  font-style: italic;
  font-size: 8.5pt;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.coach-quote .by {
  display: block;
  font-style: normal;
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 7.5pt;
  color: var(--gold);
  margin-top: 0.04in;
}

/* ── Roster (team card back) ── */
.roster { }
.roster-head {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 9pt; color: var(--gold); margin-bottom: 0.07in;
}
.roster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.045in 0.22in;
}
.roster-item { display: flex; align-items: baseline; gap: 0.08in; font-size: 8.5pt; line-height: 1.25; }
.roster-item b {
  font-family: 'Anton', sans-serif; color: var(--gold);
  font-size: 9pt; min-width: 0.32in; text-align: right; flex: 0 0 auto;
}
.roster-item span { color: rgba(255,255,255,0.85); }

/* Toggle: photo present → show photo, hide 2nd paragraph (and vice-versa) */
.card-back .second-photo,
.card-back.has-photo .back-body-2 { display: none; }
.card-back.has-photo .second-photo { display: block; }
.card-back .back-body-2 { display: block; }

/* Hide whole optional blocks when empty (host adds .is-empty). */
.is-empty { display: none !important; }

/* ── Signature capture modal (shared signature.js) ── */
.sig-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,12,22,0.82); backdrop-filter: blur(4px);
  padding: 20px;
}
.sig-modal.open { display: flex; }
.sig-dialog {
  width: min(640px, 100%);
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: 14px; padding: 18px;
}
.sig-dialog .s-eyebrow {
  font-family: 'League Gothic', sans-serif; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 11px; color: var(--gold); margin-bottom: 10px;
}
.sig-frame {
  position: relative; background: var(--paper);
  border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.sig-frame canvas { display: block; width: 100%; height: 240px; touch-action: none; cursor: crosshair; }
.sig-frame .baseline { position: absolute; left: 6%; right: 6%; bottom: 26%; border-bottom: 2px solid rgba(10,10,10,0.35); pointer-events: none; }
.sig-frame .hint { position: absolute; left: 0; right: 0; bottom: 26%; transform: translateY(-6px); text-align: center; font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; color: rgba(10,10,10,0.35); pointer-events: none; transition: opacity 0.15s; }
.sig-frame.has-ink .hint { opacity: 0; }
.sig-frame .xmark { position: absolute; left: 6%; bottom: 26%; transform: translateY(-3px); color: rgba(10,10,10,0.5); font-size: 18px; pointer-events: none; }
.sig-actions { display: flex; gap: 10px; margin-top: 14px; }
.sig-actions button { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: #fff; cursor: pointer; background: var(--navy); border: 1px solid var(--gold); border-radius: 8px; padding: 9px 16px; }
.sig-actions button.ghost { border-color: var(--navy-line); color: rgba(255,255,255,0.8); }
.sig-actions button:disabled { opacity: 0.45; cursor: default; }
.sig-actions .spacer { margin-left: auto; }

/* ── Inline editing (card proof; enabled by .editing on the card root) ── */
.editing [contenteditable] { cursor: text; outline: none; border-radius: 3px; transition: box-shadow .1s; }
.editing [contenteditable]:hover { box-shadow: 0 0 0 1.5px rgba(212,175,55,0.45); }
.editing [contenteditable]:focus { box-shadow: 0 0 0 2px var(--gold); background: rgba(212,175,55,0.08); }
.editing .cardedit.overflow { box-shadow: 0 0 0 2px #ff5a5a !important; }
/* photo drop/click zones (athlete photo + action photo) */
.editing .card-photo, .editing .card-back.has-photo .second-photo { cursor: pointer; }
.editing .card-photo:hover, .editing .card-back.has-photo .second-photo:hover { box-shadow: inset 0 0 0 2px rgba(212,175,55,0.6); }
.card-photo.drop-hot, .second-photo.drop-hot { box-shadow: inset 0 0 0 3px var(--gold); }
.exporting .card-photo, .exporting .second-photo { cursor: default; box-shadow: none; }
/* coach-quote curly marks only when it has text */
.coach-quote .cq-text:not(:empty)::before { content: "\201C"; }
.coach-quote .cq-text:not(:empty)::after { content: "\201D"; }
/* in edit mode, surface the empty coach-quote block with an add prompt */
.editing .coach-quote.is-empty { display: block !important; opacity: 0.9; }
.editing .coach-quote .cq-text:empty::after { content: "+ Add a coach quote"; color: rgba(255,255,255,0.4); font-style: normal; }
/* keep all editing chrome out of the exported proof (placed last → wins) */
.exporting [contenteditable] { box-shadow: none !important; background: none !important; }
.exporting .coach-quote.is-empty { display: none !important; }
.exporting .coach-quote .cq-text:empty::after { content: ""; }