/* Big League Stories — FRAMED COVER (11×14in magazine-cover keepsake).
 * Design source: mockups/framed-cover-v0.html (full-bleed photo version).
 * Loaded after card.css (fonts: Anton, League Gothic, Allura). Everything is
 * scoped under .bls-cover. Proof-only affordances hide under an ancestor
 * `.exporting` (added by BLSCard.captureSide).
 *
 * html2canvas constraints (print render): no filter / mask-image /
 * mix-blend-mode, no repeating gradients, no stacked inset box-shadows.
 */
.bls-cover {
  --team: #1E4FC2;
  --deep: #071230;
  --gold: #F2C230;            /* BRAND gold: issue strip, QR ticket */
  --accent: #F2C230;          /* CUSTOMER accent = team color (set by cover.js); gold when none picked */
  --accent-ink: #071230;      /* text on an accent-colored block (navy on light, white on dark) */
  --accent-rule: #F2C230;     /* masthead rule beside STORIES (true color; brightened if near-black) */
  --accent-text: #F2C230;     /* accent used AS text over the dark photo (brightened to stay readable) */
  position: relative; width: 1056px; height: 1344px; overflow: hidden; flex: 0 0 auto;
  color: #fff; text-align: left;
  background: radial-gradient(ellipse 62% 48% at 66% 44%, #EEF4FF 0%, var(--team) 44%, var(--deep) 100%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.bls-cover *, .bls-cover *::before, .bls-cover *::after { box-sizing: border-box; }
.exporting .bls-cover { box-shadow: none !important; }

/* ── Photo (full bleed, under everything) ── */
.cv-photo {
  position: absolute; z-index: 0; left: 0; right: 0; top: 150px; bottom: 0;
  background-position: center top; background-size: cover; background-repeat: no-repeat;
  cursor: pointer;
}
.bls-cover.has-photo .cv-photo { touch-action: none; cursor: grab; }
.cv-photo-hint {
  position: absolute; left: 70%; top: 34%; transform: translate(-50%, -50%);
  font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 30px;
  color: rgba(255, 255, 255, .9); border: 2px dashed rgba(255, 255, 255, .6); border-radius: 60px;
  padding: 20px 40px; background: rgba(8, 19, 37, .4); white-space: nowrap; pointer-events: none;
}
.bls-cover.has-photo .cv-photo-hint, .exporting .cv-photo-hint { display: none; }
/* Drag hint from the shared enablePhotoReposition() helper, sized for the cover. */
.bls-cover.has-photo .cv-photo > .slot-hint {
  display: inline-flex; left: 80%; top: 440px; bottom: auto; font-size: 22px; padding: 8px 22px; gap: 10px;
}
.bls-cover .cv-photo > .slot-hint svg { width: 24px; height: 24px; }

/* Scrims — plain gradient layers so type always reads over any photo. */
.cv-top, .cv-vig { position: absolute; left: 0; right: 0; pointer-events: none; }
.cv-top { z-index: 1; top: 0; height: 420px;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deep) 36%, rgba(7, 18, 48, 0) 100%); }
.cv-vig { z-index: 1; top: 0; bottom: 0;
  background:
    linear-gradient(0deg, rgba(4, 10, 28, .95) 0%, rgba(4, 10, 28, .78) 16%, rgba(4, 10, 28, .4) 34%, rgba(4, 10, 28, 0) 48%),
    linear-gradient(90deg, rgba(4, 10, 28, .86) 0%, rgba(4, 10, 28, .62) 30%, rgba(4, 10, 28, 0) 58%); }

/* ── Top strip + masthead ── */
.cv-strip {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 40px; padding: 0 44px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .3em; font-size: 16px;
  color: rgba(255, 255, 255, .88); white-space: nowrap;
}
.cv-strip b { color: var(--gold); font-weight: 400; }
.cv-strip-r b { color: var(--accent-text); }
.cv-mast { position: absolute; z-index: 3; top: 50px; left: 40px; right: 40px; pointer-events: none; }
/* Brand lockup (operator, 2026-10-04): logo + BIG LEAGUE large, fading from
   white into the team color (gold by default); then a gold rule running into
   a white STORIES. The fade is DRAWN to an <img> by cover.js — CSS
   gradient text (background-clip: text) prints as a solid block in html2canvas. */
.cv-mast-big {
  display: flex; align-items: center; gap: 22px; height: 164px; font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: 164px; line-height: 1; letter-spacing: .005em; color: #fff; white-space: nowrap;
}
.cv-mast-big .cv-logo { height: 136px; flex: 0 0 auto; }
.cv-mast-big .cv-bl-img { display: none; height: 164px; flex: 0 0 auto; }
.cv-mast-big.drawn .cv-bl-img { display: block; }
.cv-mast-big.drawn .cv-bl-text { display: none; }
.cv-mast-sub {
  display: flex; align-items: center; justify-content: flex-end; margin-top: -4px;
  font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 96px; line-height: 1; letter-spacing: .012em; color: #fff;
}
.cv-mast-sub .rule { flex: 1 1 auto; height: 6px; background: var(--accent-rule); margin: 0 26px 0 6px; }

/* ── Corner badge ── */
.cv-badge {
  position: absolute; z-index: 6; right: 34px; top: 360px; width: 150px; height: 150px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); transform: rotate(10deg); border: 4px solid var(--deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35); pointer-events: none;
}
.cv-badge .ring { position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; border-radius: 50%; border: 1.5px solid var(--accent-ink); }
.cv-badge .a, .cv-badge .c { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: 15px; }
.cv-badge .b { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 30px; line-height: .95; margin: 3px 0; max-width: 126px; }
.cv-badge.long .b { font-size: 21px; line-height: 1; }

/* ── Cover lines (left column) ── */
.cv-lines { position: absolute; z-index: 5; left: 44px; top: 392px; width: 400px; }
.cv-flag {
  display: inline-block; padding: 6px 12px 5px; background: var(--accent); color: var(--accent-ink);
  font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .3em; font-size: 17px;
}
.cv-head {
  margin: 14px 0 0; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 60px;
  line-height: .95; color: #fff; text-shadow: 0 3px 16px rgba(0, 0, 0, .35); overflow-wrap: break-word;
}
.cv-head .gold { color: var(--accent-text); }
.cv-deck {
  margin: 14px 0 0; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500;
  font-size: 16.5px; line-height: 1.42; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.cv-rule { height: 3px; width: 64px; background: var(--accent-text); margin: 22px 0 16px; }
.cv-stat { display: flex; align-items: center; gap: 14px; }
.cv-stat .n { font-family: 'Anton', sans-serif; font-size: 132px; line-height: .8; color: var(--accent-text); text-shadow: 0 4px 18px rgba(0, 0, 0, .3); white-space: nowrap; }
.cv-stat.wide .n { font-size: 84px; }
.cv-stat .t { font-family: 'League Gothic', sans-serif; text-transform: uppercase; font-size: 34px; line-height: .95; letter-spacing: .04em; }
.cv-stat .t small { display: block; font-size: 19px; letter-spacing: .24em; color: rgba(255, 255, 255, .75); margin-top: 6px; }
.cv-quote { margin-top: 22px; position: relative; padding-left: 40px; }
.cv-quote .qm { position: absolute; left: 0; top: -12px; font-family: 'Anton', sans-serif; font-size: 72px; line-height: 1; color: var(--accent-text); }
.cv-quote p { margin: 0; font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 31px; line-height: 1.04; color: #fff; }
.cv-quote .who { display: block; margin-top: 8px; font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .26em; font-size: 16px; color: var(--accent-text); }

/* ── Second cover line (right side) ── */
.cv-line2 { position: absolute; z-index: 6; right: 40px; top: 742px; width: 214px; text-align: right; }
.cv-line2 .bar { height: 3px; width: 48px; background: var(--accent-text); margin: 0 0 10px auto; }
.cv-line2 .k { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .3em; font-size: 16px; color: var(--accent-text); }
.cv-line2 p { margin: 6px 0 0; font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 27px; line-height: 1.05; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }

/* ── Name + bottom line ── */
.cv-name { position: absolute; z-index: 6; left: 40px; bottom: 112px; margin: 0; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; pointer-events: none; }
.cv-name .first { display: block; font-family: 'League Gothic', sans-serif; font-size: 66px; letter-spacing: .5em; color: var(--accent-text); line-height: 1; padding-left: 8px; white-space: nowrap; }
.cv-name .last { display: block; font-size: 214px; line-height: .86; color: #fff; letter-spacing: -.005em; white-space: nowrap; }
.cv-meta {
  position: absolute; z-index: 6; left: 48px; bottom: 74px; display: flex; gap: 20px; pointer-events: none;
  font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .26em; font-size: 19px;
  color: rgba(255, 255, 255, .9); white-space: nowrap;
}
.cv-meta b { color: var(--accent-text); font-weight: 400; }

/* ── Autograph (signed cover) ── */
.cv-sig { position: absolute; z-index: 6; left: 668px; top: 960px; width: 360px; height: 120px; transform: rotate(-8deg); cursor: pointer; }
.cv-sig-ink { font-family: 'Allura', cursive; font-size: 64px; line-height: 120px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); white-space: nowrap; }
.cv-sig-img { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.cv-sig.signed .cv-sig-img { display: block; }
.cv-sig.signed .cv-sig-ink { visibility: hidden; }
.cv-sig-cta {
  position: absolute; left: 0; bottom: -18px; font-family: 'League Gothic', sans-serif; text-transform: uppercase;
  letter-spacing: .2em; font-size: 17px; color: var(--gold); white-space: nowrap;
}
.cv-sig.signed .cv-sig-cta, .exporting .cv-sig-cta { display: none; }

/* ── QR ticket (operator pick, 2026-10-04): gold code on navy, gold hairline — no white box ── */
.cv-upc {
  position: absolute; z-index: 7; right: 40px; bottom: 26px; display: flex; gap: 12px; align-items: center;
  background: rgba(7, 18, 48, .86); color: #fff; padding: 10px 18px 10px 10px;
  border: 1.5px solid var(--gold); border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); pointer-events: none;
}
.cv-upc img { width: 100px; height: 100px; display: block; border-radius: 6px; }
.cv-upc .u1 { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: var(--gold); }
.cv-upc .u2 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 26px; line-height: 1; margin: 2px 0 4px; }
.cv-upc .u3 { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.5px; color: rgba(255, 255, 255, .72); max-width: 150px; }
.cv-upc .u4 { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: rgba(255, 255, 255, .72); margin-top: 6px; }

/* ── Deep team colors: BIG accent type keeps the true color and gains a thin
   white outline so it reads on the dark photo; small accent text already uses
   the brightened --accent-text. Gold (the default) is light, so none of this applies. ── */
.bls-cover.accent-dark .cv-head .gold,
.bls-cover.accent-dark .cv-stat .n,
.bls-cover.accent-dark .cv-quote .qm { color: var(--accent); -webkit-text-stroke: 2.5px #fff; paint-order: stroke fill; text-shadow: none; }
.bls-cover.accent-dark .cv-name .first { color: var(--accent); -webkit-text-stroke: 2px #fff; paint-order: stroke fill; }
.bls-cover.accent-dark .cv-badge { border-color: #fff; }
.bls-cover.accent-dark .cv-flag { box-shadow: 0 0 0 2px #fff; }

/* ── Proof-only edit affordances (never printed) ── */
/* (.cv-line2 is absolutely placed and must stay so — it is its own anchor.) */
.cv-edit { cursor: pointer; }
.cv-edit:not(.cv-line2) { position: relative; }
.cv-edit::after {
  content: "✎"; position: absolute; top: -8px; right: -14px; width: 40px; height: 40px; border-radius: 50%;
  background: #C8102E; color: #fff; font: 24px/40px -apple-system, system-ui, sans-serif; text-align: center;
  text-shadow: none; letter-spacing: 0; opacity: .95; pointer-events: none;
}
.cv-line2.cv-edit::after { right: auto; left: -14px; }
.exporting .cv-edit::after { display: none; }
/* Empty optional elements collapse entirely. */
.bls-cover [hidden] { display: none !important; }

/* Empty optional text: a proof-only "＋ Add…" placeholder, never printed. */
.bls-cover .cv-empty { opacity: .6; }
.bls-cover .cv-empty p, .bls-cover p.cv-empty { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 22px; }
.exporting .bls-cover .cv-empty { display: none !important; }