/* Fixed 300×420 / 420×300 trim geometry is shared by previews and capture.
   The NPL print sheet adds 15px (1/8 inch) bleed around this same artwork. */
@font-face {
  font-family: "EveryMVP Card Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

@font-face {
  font-family: "EveryMVP Card Inter";
  src: url("/fonts/inter-latin-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
}

/* Card type for the new templates (docs/card-studio-redesign.md): Barlow
   Condensed and the complete Inter, with every accented and Vietnamese letter. */
@font-face {
  font-family: "EveryMVP Card Barlow";
  src: url("/fonts/barlow-condensed-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: "EveryMVP Card Barlow";
  src: url("/fonts/barlow-condensed-extrabold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: block;
}

@font-face {
  font-family: "EveryMVP Card Sans";
  src: url("/fonts/inter-card.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

.emvp-card {
  position: relative;
  width: 300px;
  height: 420px;
  flex: none;
  overflow: hidden;
  background: var(--card-background);
  color: var(--card-text);
  font-family: "EveryMVP Card Inter", sans-serif;
  font-size: 10px;
  line-height: 1.5;
  text-align: left;
  isolation: isolate;
}

.emvp-card *, .emvp-card *::before, .emvp-card *::after { box-sizing: border-box; }
.emvp-card p, .emvp-card figure { margin: 0; }
.emvp-card img { display: block; max-width: none; }
.emvp-card__asset-preload { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.emvp-card__motif, .emvp-card__texture { position: absolute; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; pointer-events: none; }
.emvp-card__motif { left: 0; top: 75px; width: 330px; height: 220px; background: var(--card-motif-color); }
.emvp-card__photo { position: absolute; left: 23px; top: 81px; width: 254px; height: 208px; overflow: hidden; background: #1a1d22; container-type: size; }
/* The photo covers its window at its own shape (--photo-aspect, set once it loads), centered,
   then moves by the family's framing. Nothing is cut away first, so dragging and zooming
   reach every part of the photo; the editor keeps the window covered. */
.emvp-card__photo img { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--photo-aspect, 1))); height: max(100cqh, calc(100cqw / var(--photo-aspect, 1))); max-width: none; object-fit: cover; transform-origin: center; user-select: none; pointer-events: none; }
.emvp-card__border { position: absolute; }
.emvp-card__border--top, .emvp-card__border--bottom { left: 17px; width: 266px; height: 6px; background: linear-gradient(90deg, var(--card-frame-dark), var(--card-frame-light), var(--card-frame-dark)); }
.emvp-card__border--top { top: 75px; }
.emvp-card__border--bottom { top: 289px; }
.emvp-card__border--left, .emvp-card__border--right { top: 81px; width: 6px; height: 208px; background: linear-gradient(180deg, var(--card-frame-dark), var(--card-frame-light), var(--card-frame-dark)); }
.emvp-card__border--left { left: 17px; }
.emvp-card__border--right { left: 277px; }
.emvp-card__front-logo { position: absolute; left: 17px; top: 15px; width: 54px; height: 54px; }
.emvp-card__front-logo img, .emvp-card__placed-logo img { width: 100%; height: 100%; object-fit: contain; }
.emvp-card__fit { display: flex; align-items: center; overflow: hidden; }
.emvp-card__fit > span { display: block; flex: none; max-width: 100%; white-space: nowrap; line-height: 1; }
.emvp-card__team-name, .emvp-card__season { position: absolute; left: 81px; width: 196px; font-weight: 700; }
.emvp-card__team-name { top: 22px; height: 16px; letter-spacing: 0.06em; }
.emvp-card__season { top: 39px; height: 13px; letter-spacing: 0.14em; }
.emvp-card__identity { position: absolute; left: 23px; top: 306px; width: 254px; display: flex; flex-direction: column; align-items: flex-end; }
.emvp-card__identity .emvp-card__fit { width: 254px; justify-content: flex-end; text-align: right; }
.emvp-card__first-name { font-weight: 700; font-style: italic; letter-spacing: 0.08em; }
.emvp-card__last-name { margin-top: 4px; font-weight: 900; font-style: italic; letter-spacing: -0.01em; }
.emvp-card__position, .emvp-card__league { font-weight: 700; letter-spacing: 0.12em; }
.emvp-card__position, .emvp-card__position-space { margin-top: 5.5px; }
.emvp-card__position-space { width: 1px; height: 10px; }
.emvp-card__league { margin-top: 8px; }
.emvp-card--team_back, .emvp-card--player_back { background: var(--card-back-border); color: var(--card-back-ink); }
.emvp-card--player_back { width: 420px; height: 300px; }
.emvp-card__back-panel { position: absolute; inset: 12px; background: var(--card-back-background); }
.emvp-card__texture { inset: 12px; background: var(--card-back-tint); }
.emvp-card__placed-logo { position: absolute; }
.emvp-card__placed-logo--player img { object-position: left; }
.emvp-card__print-mark { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; justify-content: center; z-index: 9; }
.emvp-card__print-mark span { display: block; padding: 3px 9px; border-radius: 999px; }
.emvp-card__print-mark img { height: 8px; width: auto; }
.emvp-card__back-content { position: absolute; inset: 12px; padding: 22px 26px; display: flex; gap: 24px; }
.emvp-card__back-identity { width: 148px; flex-shrink: 0; border-right: 1px solid color-mix(in srgb, var(--card-back-ink) 13.33%, transparent); padding-right: 20px; margin-bottom: 46px; box-sizing: content-box; }
.emvp-card__back-identity .emvp-card__fit { width: 148px; font-weight: 900; }
.emvp-card__back-identity .emvp-card__fit span { line-height: 1.04; }
.emvp-card__back-first-name { color: color-mix(in srgb, var(--card-back-ink) 80%, transparent); }
.emvp-card__back-position, .emvp-card__back-team { font-size: 9px; letter-spacing: 0.12em; color: color-mix(in srgb, var(--card-back-ink) 60%, transparent); overflow-wrap: anywhere; }
.emvp-card p.emvp-card__back-position { margin-top: 8px; }
.emvp-card p.emvp-card__back-team, .emvp-card p.emvp-card__back-league { margin-top: 2px; }
.emvp-card__back-league { font-size: 8.5px; letter-spacing: 0.1em; color: color-mix(in srgb, var(--card-back-ink) 44%, transparent); overflow-wrap: anywhere; }
.emvp-card__back-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.emvp-card__stat { display: flex; justify-content: space-between; gap: 3px; border-bottom: 1px solid color-mix(in srgb, var(--card-back-ink) 13.33%, transparent); padding-bottom: 3px; font-size: 10px; }
.emvp-card__stat > span { color: color-mix(in srgb, var(--card-back-ink) 60%, transparent); }
.emvp-card__stat > strong { font-weight: 500; overflow-wrap: anywhere; text-align: right; }
.emvp-card__stat--empty { visibility: hidden; }
.emvp-card__stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.emvp-card__stat-grid--after-wide { margin-top: 6px; }
.emvp-card__bio-box { flex: 1; min-height: 0; margin-top: 14px; }
.emvp-card__bio { font-size: 9.5px; line-height: 1.5; color: color-mix(in srgb, var(--card-back-ink) 80%, transparent); overflow-wrap: anywhere; white-space: normal; }

.emvp-print-sheet { width: 330px; height: 450px; padding: 15px; box-sizing: border-box; position: relative; overflow: hidden; background: var(--card-front-bleed, var(--card-background)); }
.emvp-print-sheet--team_back, .emvp-print-sheet--player_back { background: var(--card-back-border); }
.emvp-print-sheet--player_back { width: 450px; height: 330px; }
.emvp-print-sheet > .emvp-card { overflow: visible; }
/* The trim falls halfway across a printer file's pixel (1/8 inch is 37.5 pixels
   at 300 DPI), so that pixel row mixes every layer at the card's edge. The front's
   own background takes the bleed's color, or the team color under a Look's ground
   would show there as a thin line around the card (WHCC's Jed, October 12). */
.emvp-print-sheet--front > .emvp-card { background: var(--card-front-bleed, var(--card-background)); }

/* Card Studio concepts. Keep these rules off Bolt and the existing backs.
   Photos that touch trim already include bleed here, even in the preview:
   changing the photo box only during export would change the approved crop. */
.emvp-concept { position: absolute; inset: 0; background: var(--concept-paper); }
.emvp-concept .emvp-card__fit { position: absolute; font-weight: 700; letter-spacing: 0.08em; }
.emvp-concept .emvp-card__photo { border: 0; }
.emvp-concept__first { left: 18px; top: 328px; width: 264px; height: 18px; letter-spacing: 0.12em !important; }
.emvp-concept .emvp-concept__last { left: 18px; top: 348px; width: 264px; height: 42px; font-weight: 800; letter-spacing: -0.02em; }
.emvp-concept__position { left: 18px; top: 391px; width: 264px; height: 14px; }
.emvp-concept__team { left: 66px; top: 23px; width: 140px; height: 18px; }
.emvp-concept__season { left: 210px; top: 20px; width: 72px; height: 24px; justify-content: center; text-align: center; letter-spacing: 0 !important; }
.emvp-concept .emvp-card__front-logo { left: 18px; top: 16px; width: 40px; height: 40px; }
.emvp-concept__rail, .emvp-concept__header, .emvp-concept__outer-frame, .emvp-concept__inner-frame,
.emvp-concept__top-scrim, .emvp-concept__nameplate, .emvp-concept__rule, .emvp-concept__accent { position: absolute; pointer-events: none; }

.emvp-card--full_bleed .emvp-card__photo { left: -15px; top: -15px; width: 330px; height: 450px; }
.emvp-card--full_bleed .emvp-concept__top-scrim { left: -15px; right: -15px; top: -15px; height: 140px; background: linear-gradient(to bottom, var(--card-background) 0 60px, transparent 100%); }
.emvp-card--full_bleed .emvp-concept__nameplate { left: -15px; right: -15px; top: 220px; bottom: -15px; background: linear-gradient(to bottom, transparent, var(--card-background) 100px); }
.emvp-card--full_bleed .emvp-concept__season { background: var(--card-motif-color); border-radius: 12px; }
.emvp-card--full_bleed .emvp-concept__rule { left: 18px; top: 317px; width: 44px; height: 3px; background: var(--card-frame-color); }

.emvp-card--sidebar .emvp-concept__rail { left: -15px; top: -15px; width: 79px; height: 450px; background: var(--card-frame-color); }
.emvp-card--sidebar .emvp-card__photo { left: 64px; top: -15px; width: 251px; height: 345px; }
.emvp-card--sidebar .emvp-concept__nameplate { left: 64px; right: -15px; top: 330px; bottom: -15px; background: var(--card-background); border-top: 3px solid var(--card-text); }
.emvp-card--sidebar .emvp-concept__team { left: 22px; top: 317px; width: 252px; height: 20px; transform: rotate(-90deg); transform-origin: top left; }
.emvp-card--sidebar .emvp-card__front-logo { left: 16px; top: 363px; width: 32px; height: 38px; }
.emvp-card--sidebar .emvp-concept__first { left: 80px; top: 339px; width: 204px; height: 16px; }
.emvp-card--sidebar .emvp-concept__last { left: 80px; top: 356px; width: 204px; height: 33px; }
.emvp-card--sidebar .emvp-concept__position { left: 80px; top: 389px; width: 114px; height: 16px; justify-content: center; background: var(--card-motif-color); border-radius: 3px; letter-spacing: 0; }
.emvp-card--sidebar .emvp-concept__season { left: 200px; top: 389px; width: 84px; height: 16px; justify-content: flex-end; text-align: right; }

.emvp-card--diagonal .emvp-concept__header { left: -15px; top: -15px; width: 330px; height: 74px; background: var(--card-motif-color); }
.emvp-card--diagonal .emvp-card__front-logo { left: 16px; top: 15px; width: 32px; height: 32px; }
.emvp-card--diagonal .emvp-concept__team { left: 56px; top: 22px; width: 145px; height: 18px; }
.emvp-card--diagonal .emvp-concept__season { left: 207px; top: 23px; width: 77px; height: 16px; justify-content: flex-end; text-align: right; }
.emvp-card--diagonal .emvp-card__photo { left: -15px; top: 59px; width: 330px; height: 273px; }
.emvp-card--diagonal .emvp-concept__nameplate { left: -30px; top: 318px; width: 360px; height: 150px; transform: rotate(8deg); transform-origin: center top; background: var(--card-background); border-top: 4px solid var(--card-frame-color); }
.emvp-card--diagonal .emvp-concept__first { left: 20px; top: 338px; width: 264px; }
.emvp-card--diagonal .emvp-concept__last { left: 20px; top: 355px; width: 214px; height: 38px; }
.emvp-card--diagonal .emvp-concept__position { left: 20px; top: 393px; width: 205px; height: 12px; }
.emvp-card--diagonal .emvp-concept__accent { left: 240px; top: 375px; width: 40px; height: 40px; background: var(--card-motif-color); border-radius: 4px; }

.emvp-card--spotlight .emvp-concept { background: var(--card-frame-color); }
.emvp-card--spotlight .emvp-concept::before { content: ""; position: absolute; inset: -15px; background: var(--card-frame-color); z-index: -1; }
.emvp-concept__pattern { position: absolute; left: 0; top: 0; }
.emvp-concept__ring { position: absolute; left: 42px; top: 76px; }
.emvp-card--spotlight .emvp-card__photo { left: 50px; top: 84px; width: 200px; height: 200px; border-radius: 50%; }
.emvp-card--spotlight .emvp-card__front-logo { width: 44px; height: 44px; }
.emvp-card--spotlight .emvp-concept__team { left: 70px; top: 37px; width: 212px; height: 18px; }
.emvp-card--spotlight .emvp-concept__season { left: 186px; top: 16px; width: 96px; height: 14px; justify-content: flex-end; text-align: right; }
.emvp-card--spotlight .emvp-concept__nameplate { left: -15px; right: -15px; top: 314px; bottom: -15px; background: var(--card-background); }
.emvp-card--spotlight .emvp-concept__first, .emvp-card--spotlight .emvp-concept__last { justify-content: center; text-align: center; }
.emvp-card--spotlight .emvp-concept__first { top: 330px; }
.emvp-card--spotlight .emvp-concept__last { top: 348px; height: 38px; }
.emvp-card--spotlight .emvp-concept__position { left: 90px; top: 387px; width: 120px; height: 18px; justify-content: center; text-align: center; background: var(--card-motif-color); border-radius: 9px; letter-spacing: 0; }

.emvp-card--retro .emvp-concept::before { content: ""; position: absolute; inset: -15px; background: var(--concept-paper); z-index: -1; }
.emvp-card--retro .emvp-concept__outer-frame { inset: 8px; border: 6px solid var(--card-background); border-radius: 10px; }
.emvp-card--retro .emvp-concept__inner-frame { inset: 18px; border: 2px solid var(--card-motif-color); border-radius: 6px; }
.emvp-card--retro .emvp-concept__header { left: 34px; top: 30px; width: 232px; height: 30px; background: var(--card-background); border-radius: 4px; }
.emvp-card--retro .emvp-concept__team { left: 40px; top: 36px; width: 220px; height: 18px; justify-content: center; text-align: center; }
.emvp-card--retro .emvp-card__photo { left: 34px; top: 72px; width: 232px; height: 220px; border: 3px solid var(--card-background); border-radius: 8px; }
.emvp-card--retro .emvp-card__front-logo { left: 40px; top: 78px; width: 40px; height: 40px; }
.emvp-card--retro .emvp-concept__first { left: 34px; top: 302px; width: 232px; height: 18px; justify-content: center; text-align: center; }
.emvp-card--retro .emvp-concept__last { left: 34px; top: 320px; width: 232px; height: 36px; justify-content: center; text-align: center; }
.emvp-card--retro .emvp-concept__rule { left: 120px; top: 358px; width: 60px; height: 3px; background: var(--card-frame-color); }
.emvp-card--retro .emvp-concept__position { left: 34px; top: 368px; width: 232px; height: 26px; justify-content: center; text-align: center; letter-spacing: 0.02em; }

/* Presentation only. Nothing below belongs inside the captured artwork. */
.emvp-card-stage { width: 100%; margin: 0; background: #0a0a0a; color: #fff; overflow: hidden; }
.emvp-card-stage__viewport { position: relative; min-height: 330px; height: 490px; width: 100%; isolation: isolate; }
.emvp-card-stage--compact .emvp-card-stage__viewport { min-height: 0; }
.emvp-card-stage--studio, .emvp-card-stage--tile { background: transparent; overflow: visible; }
.emvp-card-stage--tile .emvp-card-stage__glow { display: none; }
/* The studio's black backdrop swallows dark cards; a soft halo and a faint edge keep every card readable. Stage only, never the art. */
.emvp-card-stage--studio .emvp-card-stage__glow { inset: -4% -12%; background: radial-gradient(ellipse at 50% 42%, #ffffff70 0%, #ffffff33 40%, transparent 72%); filter: blur(24px); }
.emvp-card-stage--studio .emvp-card-stage__face, .emvp-card-stage--tile .emvp-card-stage__face { top: 0; box-shadow: none; }
.emvp-card-stage--studio .emvp-card-stage__face { box-shadow: 0 0 0 1px #ffffff33, 0 18px 48px #000000b3, 0 0 36px #ffffff1a; }
/* Card Studio's dark backdrop (the owner's choice, October 6, "softer glow"): a light keyline and a small glow
   keep a black card or border apart from the page, without a misty halo. Stage only; the Buyer Studio keeps its own. */
.emvp-card-studio .emvp-card-stage--studio .emvp-card-stage__face { box-shadow: 0 0 0 1px #ffffff4d, 0 0 7px 1px #ffffff40, 0 16px 36px #000000b3; }
.emvp-card-studio .emvp-card-stage--studio .emvp-card-stage__glow { opacity: 0.3; }
.emvp-card-stage--studio .emvp-card-stage__caption { color: #c084fc; font: 700 9px/1.5 Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.emvp-card-stage--tile .emvp-card-stage__caption { display: none; }
/* On Card Studio's white panel a small card that's nearly white at its edge gets a light keyline and a soft shadow,
   so its outline still shows. Stage only, never the art. */
.emvp-studio-panel .emvp-card-stage--light-edge .emvp-card-stage__face { box-shadow: 0 0 0 1px var(--color-line), 0 2px 10px #00000033; }
.emvp-card-stage__glow { position: absolute; inset: -8%; background: radial-gradient(circle at 50% 50%, #ffffffcc 0%, #ffffff66 26%, #ffffff22 46%, transparent 68%); filter: blur(28px); pointer-events: none; }
.emvp-card-stage__face { position: absolute; top: 24px; left: 50%; width: 300px; height: 420px; margin-left: -150px; box-shadow: 0 24px 60px #0009, 0 0 0 1px #ffffff24; transition: transform 140ms ease-out; }
.emvp-card-stage__face[hidden] { display: none; }
.emvp-card-stage__flip-area { position: absolute; inset: 0; z-index: 1; }

/* The order page's fan ("Clean dark", the owner's choice, October 6): the Player back, Team back, and a
   tappable front on the team's dark color, every card inside the box with a light keyline, so a black
   card or border still shows, and no glow. Diagonal stripes in a team color run behind the cards.
   --fan is the card scale; every offset is a share of the card width. The Team back's logo stays clear
   of the front. */
.emvp-card-fan { --fan: 0.44; --w: calc(300px * var(--fan)); --fan-edge: 0 0 0 1px #ffffff73, 0 10px 22px #00000073; position: relative; height: calc(var(--w) * 1.86); overflow: hidden; border-radius: 24px; background: var(--fan-ground); }
.emvp-card-fan::before { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--w) * 0.62); background: repeating-linear-gradient(-28deg, transparent 0 14px, color-mix(in srgb, var(--fan-stripes) 34%, transparent) 14px 22px); pointer-events: none; }
.emvp-card-fan__side, .emvp-card-fan__front { position: absolute; left: 50%; z-index: 1; }
.emvp-card-fan__side { box-shadow: var(--fan-edge); }
.emvp-card-fan__side > div { transform-origin: top left; }
.emvp-card-fan__player-back { width: calc(var(--w) * 1.12); height: calc(var(--w) * 0.8); margin-left: calc(var(--w) * -1.06); top: calc(var(--w) * 0.55); transform: rotate(-8deg); }
.emvp-card-fan__player-back > div { transform: scale(calc(var(--fan) * 0.8)); }
.emvp-card-fan__team-back { width: calc(var(--w) * 0.84); height: calc(var(--w) * 1.176); margin-left: calc(var(--w) * 0.26); top: calc(var(--w) * 0.3); transform: rotate(7deg); }
.emvp-card-fan__team-back > div { transform: scale(calc(var(--fan) * 0.84)); }
.emvp-card-fan__front { z-index: 2; width: var(--w); margin-left: calc(var(--w) * -0.5); top: calc(var(--w) * 0.2); transform: rotate(-2deg); }
.emvp-card-fan__front .emvp-card-stage__face { box-shadow: var(--fan-edge); }
/* The fan is sized to its own column, which stays at least 2.4 card widths wide. */
.emvp-card-fan-frame { container-type: inline-size; }
@container (max-width: 329px) { .emvp-card-fan { --fan: 0.4; } }
@container (min-width: 400px) { .emvp-card-fan { --fan: 0.5; } }
@container (min-width: 460px) { .emvp-card-fan { --fan: 0.57; } }
@container (min-width: 520px) { .emvp-card-fan { --fan: 0.64; } }
.emvp-card-stage__scale { width: max-content; transform-origin: top left; }
.emvp-card-stage__caption { position: relative; padding: 8px 20px; text-align: center; font-size: 13px; color: #b8b8b8; }
.emvp-card-stage__fit-error { display: block; padding-top: 8px; color: #fb7185; }
.emvp-card-stage__fit-error[hidden] { display: none; }
.emvp-card-stage__actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px 20px 24px; }
.emvp-card-stage__actions :is(button, a) { min-height: 44px; border: 1.5px solid #c084fc; border-radius: 999px; padding: 10px 18px; color: #c084fc; background: transparent; font: 600 14px/1.5 Inter, sans-serif; cursor: pointer; }
.emvp-card-stage__actions :is(button, a):focus-visible { outline: 2px solid #c084fc; outline-offset: 4px; }
.emvp-card-stage__actions :is(button, a):hover { background: #1c1233; }
@media (prefers-reduced-motion: reduce) { .emvp-card-stage__face { transition: none; transform: none !important; } }
@media print { .emvp-card-stage__actions, .emvp-card-stage__caption, .emvp-card-stage__glow { display: none; } }

/* New templates. Every frame, rule and plate stays at least 15 units (1/8 inch)
   inside the trim; lines keep their baselines while shrinking to fit. */
.emvp-design { position: absolute; inset: 0; font-family: "EveryMVP Card Barlow", sans-serif; }
.emvp-line { position: absolute; white-space: nowrap; overflow: visible; }
.emvp-line--display { font-family: "EveryMVP Card Barlow", sans-serif; line-height: 0.7; }
.emvp-line--sans { font-family: "EveryMVP Card Sans", sans-serif; line-height: 0.73; }
.emvp-line > span { display: inline-block; line-height: inherit; }
.emvp-design .emvp-design__logo { left: 15px; top: 15px; width: 40px; height: 35px; display: flex; align-items: center; justify-content: center; }
.emvp-design .emvp-design__logo img { width: 100%; height: 100%; object-fit: contain; }
.emvp-design .emvp-design__logo svg { display: block; width: auto; height: 100%; max-width: 100%; overflow: visible; }
.emvp-classic__rule { position: absolute; left: 15px; right: 15px; top: 60.8px; height: 2px; }
.emvp-classic .emvp-classic__photo { left: 15px; top: 71.6px; width: 270px; height: 247px; border: 6.4px solid; background: #1a1d22; }
/* From card version 2 the frame is thin, like Stripes'; its outer edge stays put, so the photo shows a little more. */
.emvp-classic .emvp-classic__photo--thin { border-width: 3.2px; }
.emvp-classic__plate { position: absolute; left: 15px; right: 15px; top: 327.4px; height: 77.6px; }
.emvp-line--vertical { display: flex; align-items: center; justify-content: center; transform: rotate(-90deg); transform-origin: center; }
.emvp-stripes__art { position: absolute; left: -15px; top: -15px; width: 330px; height: 450px; overflow: visible; }
.emvp-stripes__rule { position: absolute; left: 15px; right: 15px; top: 61.6px; height: 2px; }
.emvp-stripes .emvp-stripes__photo { left: 15px; top: 73.2px; width: 270px; height: 244.8px; border: 3.2px solid; background: #1a1d22; }
.emvp-rail__rail { position: absolute; left: -15px; top: -15px; width: 81px; height: 450px; }
.emvp-rail .emvp-rail__photo { left: 66px; top: -15px; width: 249px; height: 344.6px; background: #1a1d22; }
.emvp-rail__rule { position: absolute; left: 66px; right: -15px; top: 329.6px; height: 2.4px; }
.emvp-rail__plate { position: absolute; left: 66px; right: -15px; top: 332px; height: 103px; }

/* The new templates' backs: a centered logo on the Team back, and on the
   Player back (420 × 300) the name across a band at the top. */
.emvp-design-back__texture { position: absolute; left: -15px; top: -15px; width: 330px; height: 450px; overflow: visible; pointer-events: none; }
.emvp-design-back__logo { position: absolute; display: flex; align-items: center; justify-content: center; }
.emvp-design-back__logo img { width: 100%; height: 100%; object-fit: contain; }
.emvp-design-back__logo svg { display: block; width: auto; height: 100%; max-width: 100%; overflow: visible; }
/* A texture stops just short of the Team back's logo or sticker, following its outline, so there's no
   square of plain color around a round sticker (the owner's choice, October 6). The halo is the panel's
   own color, drawn from the logo's shape. It prints. */
.emvp-design-back__texture ~ .emvp-design-back__logo {
  filter: drop-shadow(0 0 1.5px var(--card-back-background)) drop-shadow(0 0 1.5px var(--card-back-background)) drop-shadow(0 0 3px var(--card-back-background)) drop-shadow(0 0 3px var(--card-back-background));
}
.emvp-dback__body { position: absolute; inset: -15px; }
.emvp-dback__band { position: absolute; left: -15px; right: -15px; top: -15px; height: 115px; }
.emvp-dback__rule { position: absolute; left: -15px; right: -15px; top: 100px; height: 2.4px; }
.emvp-dback__stats { position: absolute; left: 15px; top: 116px; width: 180px; height: 152px; display: flex; flex-direction: column; gap: 5px; font-family: "EveryMVP Card Sans", sans-serif; }
/* A pair's two halves (HT/WT, BATS/THROWS) pass the rows' line color on, so their
   underlines match the other rows (the owner's decision, October 4). */
.emvp-dback__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; border-color: inherit; }
.emvp-dback__stat { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 1px solid; border-color: inherit; padding-bottom: 3px; font-size: 10px; line-height: 1.2; }
/* Every row prints on one line, never wrapping (the owner's rule, October 7): the
   builder stops typing once a row is full, and a row that measures a little too wide
   shrinks slightly (card_artwork.js). */
.emvp-dback__stat span { font-family: "EveryMVP Card Barlow", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }
.emvp-dback__stat strong { font-weight: 600; text-align: right; white-space: nowrap; }
.emvp-dback__bio-box { position: absolute; left: 212px; top: 116px; width: 193px; height: 152px; }
.emvp-dback__bio { margin: 0; border-left: 2.4px solid; padding-left: 9px; font: 400 9.5px/1.5 "EveryMVP Card Sans", sans-serif; overflow-wrap: anywhere; }
.emvp-dback__mark { position: absolute; right: 15px; bottom: 15px; width: 31px; height: 20px; }
.emvp-dback__mark svg { display: block; width: 100%; height: 100%; }

/* Buyer Studio stage (docs/buyer-studio-redesign.md). Presentation only: none of
   this reaches the print files. */
.buyer-stage__card { width: min(56vw, 232px); transition: width 200ms ease 250ms; }
.buyer-stage__card[data-face="player_back"] { width: min(86vw, 340px); }
.buyer-stage__card--confirmed { width: min(64vw, 270px); }
@media (min-width: 1024px) {
  .buyer-stage__card, .buyer-stage__card--confirmed { width: 370px; }
  .buyer-stage__card[data-face="player_back"] { width: min(100%, 540px); }
}
/* Phones, Photo step with a photo: the card also fits the screen's height (Safari's
   smallest visible height, svh), so "Get the photo just right", its instructions, and
   Continue show without scrolling on most iPhones. The smallest phones keep a 150px
   card for framing and scroll a little (the owner's testing, October 3). */
@media (max-width: 1023px) {
  .buyer-studio:has([data-buyer-target="photoControls"]:not([hidden])) .buyer-stage__card { width: clamp(150px, calc((100svh - 375px) / 1.4), min(56vw, 232px)); }
}
/* Phones, Steps 2 and 3: a smaller card, so the boxes have room under it. While the
   family types, it shrinks to a thumbnail and the top bar slides away, so the card
   pins at the very top (the owner's iPhone testing, October 4). Both come back a
   moment after the field loses focus (the delays), so the tap that left the field,
   on Continue or a row's buttons, isn't moved out from under the finger. */
@media (max-width: 1023px) {
  .buyer-studio:is([data-buyer-step-value="player"], [data-buyer-step-value="back"], [data-buyer-step-value="builder"]) .buyer-stage__card { width: min(42vw, 165px); }
  .buyer-studio:is([data-buyer-step-value="player"], [data-buyer-step-value="back"], [data-buyer-step-value="builder"]) .buyer-stage__card[data-face="player_back"] { width: min(70vw, 275px); }
  .buyer-stage { transition: top 0s linear 250ms; }
  .buyer-stage > div { transition: padding 200ms ease 250ms; }
  .buyer-studio__header { transition: transform 0s linear 250ms; }
  .buyer-studio--pinned .buyer-panel { transition: padding-bottom 0s linear 250ms; }
  .buyer-studio--pinned:has(.buyer-panel :is(input[type="text"], input[type="date"], textarea, select):focus) .buyer-studio__header { transform: translateY(-100%); transition-delay: 0s; }
  .buyer-studio--pinned:has(.buyer-panel :is(input[type="text"], input[type="date"], textarea, select):focus) .buyer-stage { top: 0; transition-delay: 0s; }
  .buyer-studio--pinned:has(.buyer-panel :is(input[type="text"], input[type="date"], textarea, select):focus) .buyer-stage__card { width: 84px; transition-delay: 0s; }
  .buyer-studio--pinned:has(.buyer-panel :is(input[type="text"], input[type="date"], textarea, select):focus) .buyer-stage__card[data-face="player_back"] { width: 170px; }
  .buyer-studio--pinned:has(.buyer-panel :is(input[type="text"], input[type="date"], textarea, select):focus) .buyer-stage > div { padding-top: 8px; padding-bottom: 8px; transition-delay: 0s; }
  /* Room below the panel while the card is small, so the page can always scroll the
     field up to just under the card (buyer#placeFocusedField) instead of jumping back. */
  .buyer-studio--pinned:has(.buyer-panel :is(input[type="text"], input[type="date"], textarea, select):focus) .buyer-panel { padding-bottom: 40svh; transition-delay: 0s; }
}
/* Review shows both sides side by side (orders/_review). */
.buyer-review__card { width: min(32vw, 130px); }
.buyer-review__card[data-face="player_back"] { width: min(52vw, 205px); }
@media (min-width: 1024px) {
  .buyer-review__card { width: 220px; }
  .buyer-review__card[data-face="player_back"] { width: 300px; }
}
/* The side's name isn't shown here; only a fit problem uses the caption. */
.buyer-stage .emvp-card-stage__caption, .buyer-confirmed .emvp-card-stage__caption { padding: 0 12px; }
/* A 2px inner edge at 55% white keeps a dark card distinct on the dark stage. */
.buyer-stage .emvp-card-stage__glow { display: none; }
/* The stage keeps its height when the card turns over; the landscape Player back sits in its middle. */
:is(.buyer-stage, .buyer-confirmed) .emvp-card-stage__face { top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
:is(.buyer-stage, .buyer-confirmed) .emvp-card-stage__face::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 2px #ffffff8c; pointer-events: none; }
.buyer-confirmed .emvp-card-stage--studio .emvp-card-stage__glow { background: radial-gradient(ellipse at 50% 45%, #c6ff0047 0%, #c6ff001c 45%, transparent 72%); }
/* Adjusting the photo: the whole photo shows behind a see-through card, and a scrim
   covers everything outside the photo window. */
.buyer-stage.is-adjusting .emvp-card-stage { position: relative; z-index: 1; }
.buyer-stage.is-adjusting :is(.emvp-card, .emvp-design) { background: transparent !important; }
.buyer-stage.is-adjusting .emvp-card-stage__face { box-shadow: none; }
.buyer-stage.is-adjusting .emvp-card-stage__glow { opacity: 0; }
.buyer-stage.is-adjusting :is(.emvp-classic__plate, .emvp-classic__rule, .emvp-stripes__art, .emvp-stripes__rule, .emvp-rail__rail, .emvp-rail__rule, .emvp-rail__plate) { opacity: 0.35; }
.buyer-adjust__ghost { position: absolute; z-index: 0; max-width: none; pointer-events: none; user-select: none; }
.buyer-adjust__scrim { position: absolute; z-index: 2; pointer-events: none; outline: 2px solid #fff; box-shadow: 0 0 0 200vmax #0a0a0aa6; }
.emvp-dback__stat--placeholder, .emvp-dback__bio--placeholder { opacity: 0.55; }