/* static/css/player_card_studio.css
   "Card Studio" - templates/players/_card_studio_body.html, opened from
   the "Card design studio" button in templates/players/_share_button.html.

   Ten new player-card looks (5 portrait / 5 landscape), adapted from a
   design-review artifact ("Player Card Concepts") into live HTML/CSS
   previews rather than server-rendered PNGs like
   apps.core.share_cards.PLAYER_CARD_TEMPLATES: that module deliberately
   never fetches player.photo_url (an S3/Akamai network call inside the
   request's open RLS transaction - see its own docstring), so a real
   uploaded photo can only show up here, composited client-side via a
   plain `background-image` the browser fetches on its own, outside
   Django's request/response cycle entirely.

   Download/Share (_card_studio_body.html) rasterize the currently-
   selected .pcs-card with vendored html2canvas (static/vendor/) - also
   entirely client-side, so this still never touches Django's request
   cycle or needs the "bigger, separate decision" apps.core.share_cards'
   own docstring flags for real server-side photo compositing.

   Second pass (on request - "make it just the same as choose your
   card, user can just scroll the cards"): .pcs-rail/.pcs-rail-card/
   .pcs-rail-thumb below reuse templates/players/_card_picker_body.html's
   own .pl-cardpicker-rail pattern (a horizontally-scrolling, scroll-
   snapping rail showing every style at once) rather than the original
   list-plus-one-big-preview layout. Each rail tile IS the live preview
   (real photo composited via .pcs-photo-fill below), shown at a small,
   FIXED size via a constant CSS `transform: scale()` - not the dynamic,
   JS-measured scale-to-fit the first pass used, which needed a
   ResizeObserver and had a documented sizing-feedback-loop bug on
   mobile (see git history). A rail doesn't need every tile to fit the
   modal's width the way a single big preview did; it only needs to
   fit ONE tile's column plus a peek of the next, and the rest scrolls -
   so a fixed, precomputed scale (thumbnail px / native px, see each
   .pcs-rail-thumb--* rule) is enough, with no measurement at all.

   Reuses the project's own Blacktop+ tokens (static/css/base.css's
   :root - --bg/--bg-card/--primary/--text/... , already re-themed per
   league via templates/base/league_public_base.html) rather than the
   artifact's own slightly different one-off palette, so a card preview
   here matches the rest of the live page and any custom league theme
   automatically. Prefixed `.pcs-` throughout (Player Card Studio) to
   stay clear of player_profile.css's own `.pl-*` classes. */

.pcs-modal-intro {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}

.pcs-orientation {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.pcs-orientation button {
  font: 600 12.5px/1 var(--font-body);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pcs-orientation button:hover { color: var(--text); }
.pcs-orientation button.is-active { background: var(--bg-card); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }

/* ─── Stats-shown picker (Career / Current Season / a recent game) ───
   A single flat <select> - the same control, and the browser's own
   native picker UI, on every screen size, so this needed no separate
   mobile treatment the way a custom button group would have (a long
   "<date> vs <opponent>" option just wraps into the OS's own picker
   sheet on a phone instead of competing for horizontal room with a
   pill-toggle label). Label-above-select rather than inline, purely for
   visual rhythm with the rest of this modal's stacked layout. */
.pcs-scope-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
  margin-bottom: var(--space-5);
}
.pcs-scope-picker .hl-select {
  width: 100%;
}

/* ─── Card rail - deliberately mirrors player_profile.css's
   .pl-cardpicker-rail/.pl-cardpicker-card/.pl-cardpicker-check almost
   rule-for-rule (scrollbar treatment, hover lift, selected-state
   border/tint, focus ring, entrance stagger) so this modal reads as the
   same component family as the other share modal, not a different
   interaction model - see this file's header comment. Own class
   names (not literally the same classes) because the two modals'
   preview cell is a different shape (a live-rendered, scaled-down
   .pcs-card here vs. a plain <img> there). ─── */
.pcs-rail {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Top/side clearance for the hover lift + shadow below, same reason
     .pl-cardpicker-rail's own padding/negative-margin pair exists. */
  padding: var(--space-2) var(--space-1) var(--space-3);
  margin: calc(var(--space-2) * -1) calc(var(--space-1) * -1) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.pcs-rail::-webkit-scrollbar { height: 6px; }
.pcs-rail::-webkit-scrollbar-track { background: transparent; }
.pcs-rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.pcs-rail::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.pcs-rail-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-raised);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pcs-rail-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55); }
.pcs-rail-card:active { transform: translateY(-2px) scale(0.98); }
.pcs-rail-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pcs-rail-card.is-selected { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.1); }

@media (prefers-reduced-motion: no-preference) {
  dialog[open] .pcs-rail-card {
    animation: hl-cardpicker-card-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  dialog[open] .pcs-rail-card:nth-child(1) { animation-delay: 0.12s; }
  dialog[open] .pcs-rail-card:nth-child(2) { animation-delay: 0.18s; }
  dialog[open] .pcs-rail-card:nth-child(3) { animation-delay: 0.24s; }
  dialog[open] .pcs-rail-card:nth-child(n+4) { animation-delay: 0.3s; }
}

/* Fixed-size window onto one full-resolution .pcs-card - no measurement,
   no JS: `width`/`height` here are exactly `native px * the transform's
   own scale factor` (see each --portrait/--landscape rule below), so
   the box always matches what the scaled-down card actually occupies. */
.pcs-rail-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-card);
  flex-shrink: 0;
}
.pcs-rail-thumb .pcs-card { position: absolute; top: 0; left: 0; transform-origin: top left; }
/* 176 / 264 native width = 0.6667 */
.pcs-rail-thumb--portrait { width: 176px; height: 313px; }
.pcs-rail-thumb--portrait .pcs-card { transform: scale(0.6667); }
/* 240 / 420 native width = 0.5714 */
.pcs-rail-thumb--landscape { width: 240px; height: 126px; }
.pcs-rail-thumb--landscape .pcs-card { transform: scale(0.5714); }

.pcs-rail-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pcs-rail-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.pcs-rail-hint { font-size: 12px; color: var(--text-muted); }

.pcs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.pcs-actions .hl-btn { flex: 1 1 auto; justify-content: center; }

.pcs-error {
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 90, 77, 0.12);
  border: 1px solid rgba(255, 90, 77, 0.32);
  color: var(--alert);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ─── In-app-browser download fallback ───
   templates/players/_card_studio_body.html's downloadCard() shows this
   instead of triggering a blob: anchor download when isInAppBrowser is
   true (FB/IG's WKWebView/restricted-Chrome shell swallows both the
   `download` attribute and blob: navigation - see that file's header
   comment, sixth pass). Fixed, high z-index overlay on top of the
   already-open <dialog> modal - core/_modal.html's own panel doesn't
   reach high enough for a nested overlay, so this positions against the
   viewport instead of the modal's own stacking context. */
.pcs-inapp-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, 0.72);
}
.pcs-inapp-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 360px;
  width: 100%;
}
.pcs-inapp-preview-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
  margin: 0;
}
.pcs-inapp-preview-img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.pcs-inapp-preview-panel .hl-btn { width: 100%; justify-content: center; }

.pcs-card {
  /* Explicit, not left to `.pcs-rail-thumb .pcs-card`'s `position:
     absolute` (or the capture clone's own `position: fixed`) to
     auto-blockify it: `.pcs-card` is a <span> now (button content
     model - see _card_studio_body.html), and `width`/`height` below
     (.pcs-card--portrait/--landscape) do nothing at all on an inline
     box. Both current usages happen to force position:absolute/fixed,
     which DOES auto-blockify per the CSS spec either way, but that's
     an implicit dependency worth not relying on silently. */
  display: block;
  position: relative;
  overflow: hidden;
  background: #0E0D0F;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
  color: var(--text);
}
.pcs-card--portrait { width: 264px; height: 469px; border-radius: 18px; }
.pcs-card--landscape { width: 420px; height: 220px; border-radius: 14px; }

/* `display: block` here, not left to browser defaults - every element
   inside .pcs-card is a <span> now, not the <div>s these ten designs
   were built with (see _card_studio_body.html's own comment: a
   <button>'s content model only allows phrasing content, and <div> -
   like <dt>/<dd>, also converted - isn't phrasing content). A <span>
   defaults to `display: inline`, which would run every "row"/"section"
   element together on one line instead of stacking them the way the
   original <div>-based layout assumed throughout. Same specificity
   (0,1,0) as a single class selector (the universal `*` contributes
   nothing) - anything below in this file that sets its OWN `display`
   (badges' inline-flex, .pcs-photo-fill's flex, ...) wins on source
   order, so this only fills in the elements that were never overridden -
   see `.pcs-wordmark .lit`'s own explicit `display: inline` for the one
   deliberate exception (part of a single "HOOPERSLIST" text run, not
   its own row). */
.pcs-card * { box-sizing: border-box; display: block; }

.pcs-wordmark { font: 700 13px/1 var(--font-heading); letter-spacing: 0.01em; }
.pcs-wordmark .lit { display: inline; color: var(--primary); }

.pcs-pos-badge {
  font: 700 12px/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
}

.pcs-stat-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.pcs-stat-lab { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; }

/* ── Photo fill (shared) - real photo when present, tinted initials
   fallback otherwise (matches share_cards.py's own no-photo treatment) ── */
.pcs-photo-fill {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 22%;
  background-color: rgba(var(--primary-rgb), 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcs-photo-initials {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 28px;
  color: var(--primary);
  opacity: 0.55;
}
.pcs-p1 .pcs-photo-initials,
.pcs-p2-photo .pcs-photo-initials,
.pcs-p15-photo .pcs-photo-initials,
.pcs-p16 .pcs-photo-initials,
.pcs-p18 .pcs-photo-initials { font-size: 72px; }
.pcs-l9-medallion .pcs-photo-initials,
.pcs-p17-medallion .pcs-photo-initials { font-size: 16px; }

/* Shared "PRO" pill (Foil Rookie's corner badge, Analytics Pro's header
   badge) - one small class rather than two near-identical one-offs. */
.pcs-pro-badge {
  font: 700 8.5px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-primary);
  background: linear-gradient(120deg, var(--gold), var(--primary));
  padding: 4px 8px;
  border-radius: 5px;
}

/* ══════════════════  P1 - Marquee Cutout  ══════════════════ */
.pcs-p1 { background: linear-gradient(180deg, #101012 0%, #0a0a0b 55%, #0a0a0b 100%); }
.pcs-p1 .pcs-photo-fill { background-position: 50% 14%; }
.pcs-p1 .pcs-jersey-ghost {
  position: absolute; top: 3%; right: 4%; z-index: 2;
  font: 900 88px/1 var(--font-heading); color: var(--text);
  opacity: 0.1; letter-spacing: -0.04em;
}
.pcs-p1-top { position: relative; z-index: 2; padding: 6.5% 7% 0; }
.pcs-p1-hero { position: relative; z-index: 2; padding: 0 7%; margin-top: 30%; }
.pcs-p1-hero .v { font: 900 54px/0.82 var(--font-heading); letter-spacing: -0.02em; color: var(--text); }
.pcs-p1-hero .l { font: 600 10px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-top: 6px; }
.pcs-p1-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 7% 7% 6%;
  background: linear-gradient(180deg, transparent, rgba(6, 6, 7, 0.72) 30%, #08080A 78%);
}
.pcs-p1-bottom .name { font: 900 26px/0.95 var(--font-heading); letter-spacing: -0.01em; text-transform: uppercase; }
.pcs-p1-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pcs-p1-sub .pcs-pos-badge { background: var(--primary); color: var(--on-primary); padding: 3px 8px; border-radius: 5px; font-size: 11px; }
.pcs-p1-sub .team-line { font: 400 11px var(--font-body); color: var(--text-secondary); }
.pcs-p1-strip { display: flex; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px; }
.pcs-p1-strip .stat { flex: 1; }
.pcs-p1-strip .pcs-stat-num { display: block; font-size: 15px; }
.pcs-p1-strip .pcs-stat-lab { display: block; font-size: 8px; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 2px; }

/* ══════════════════  P2 - Ticket Stub  ══════════════════ */
.pcs-p2 { background: #131114; display: flex; flex-direction: column; }
.pcs-p2-photo { position: relative; height: 58%; overflow: hidden; }
.pcs-p2-photo .pcs-photo-fill { background-position: 50% 10%; }
.pcs-p2-top { position: absolute; top: 6%; left: 7%; right: 7%; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.pcs-p2-jersey { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--primary); border: 1px solid rgba(var(--primary-rgb), 0.5); border-radius: 5px; padding: 3px 7px; background: rgba(10, 9, 11, 0.5); }
.pcs-p2-tear { position: relative; height: 0; border-top: 2px dashed var(--border-strong); margin: 0 5%; }
.pcs-p2-tear::before, .pcs-p2-tear::after { content: ""; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #131114; border: 1px solid var(--border-strong); }
.pcs-p2-tear::before { left: -13px; }
.pcs-p2-tear::after { right: -13px; }
.pcs-p2-stub { flex: 1; padding: 6% 7% 5%; display: flex; flex-direction: column; gap: 3%; }
.pcs-p2-stub .name { font: 900 22px/1 var(--font-heading); text-transform: uppercase; }
.pcs-p2-stub .team-line { font: 400 11px var(--font-body); color: var(--text-secondary); margin-top: 4px; }
.pcs-p2-stub .pcs-pos-badge { background: rgba(var(--primary-rgb), 0.18); color: var(--primary); font-size: 11px; padding: 2px 7px; border-radius: 4px; margin-top: 7px; width: fit-content; }
.pcs-p2-grid { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
.pcs-p2-grid .cell { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 4px; text-align: center; }
.pcs-p2-grid .pcs-stat-num { display: block; font-size: 16px; }
.pcs-p2-grid .pcs-stat-lab { display: block; font-size: 7.5px; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 2px; }
.pcs-p2-grid .cell.hero { grid-column: span 3; background: rgba(var(--primary-rgb), 0.14); border-color: rgba(var(--primary-rgb), 0.4); display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 10px 6px; }
.pcs-p2-grid .cell.hero .pcs-stat-num { font-size: 22px; color: var(--primary); }

/* ══════════════════  P5 - Broadsheet Mono  ══════════════════ */
.pcs-p5 { background: #F5F1EC; color: #14110F; }
.pcs-p5-grid { position: relative; height: 100%; display: flex; flex-direction: column; padding: 6% 7%; }
.pcs-p5 .pcs-wordmark { color: #14110F; }
.pcs-p5-rule { height: 1px; background: #14110F; opacity: 0.14; margin: 5% 0 0; }
.pcs-p5-photo { position: relative; margin-top: 6%; margin-left: 18%; width: 60%; aspect-ratio: 3 / 3.6; background: #14110F; overflow: hidden; box-shadow: -8px 8px 0 rgba(var(--primary-rgb), 0.85); }
.pcs-p5-photo .pcs-photo-fill { background-position: 50% 12%; }
.pcs-p5-hero { margin-top: auto; }
.pcs-p5-hero .v { font: 900 48px/0.78 var(--font-heading); letter-spacing: -0.02em; }
.pcs-p5-hero .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--primary); margin-top: 4px; }
.pcs-p5-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 5%; padding-top: 4%; border-top: 1px solid rgba(20, 17, 15, 0.14); }
.pcs-p5-foot .name { font: 700 16px/1 var(--font-heading); text-transform: uppercase; }
.pcs-p5-foot .team-line { font: 400 9px var(--font-body); color: #635B52; margin-top: 2px; }
.pcs-p5-foot .num-tag { font-family: var(--font-mono); font-size: 20px; color: var(--primary); }

/* ══════════════════  P11 - Official Roster Card  ══════════════════ */
.pcs-p11 { background: #F3F1EC; display: flex; flex-direction: column; }
.pcs-p11-photo { position: relative; height: 240px; flex-shrink: 0; }
.pcs-p11-photo .tag { position: absolute; top: 12px; left: 12px; background: rgba(20, 17, 15, 0.72); color: #F5F1EC; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 4px; z-index: 2; }
.pcs-p11-photo .num { position: absolute; top: 12px; right: 12px; background: var(--primary); color: var(--on-primary); font: 900 13px/1 var(--font-heading); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pcs-p11-body { padding: 14px 18px 16px; flex: 1; display: flex; flex-direction: column; color: #14110F; }
.pcs-p11-body .name { font: 900 20px/1 var(--font-heading); text-transform: uppercase; }
.pcs-p11-body .team-line { font: 400 10px var(--font-body); color: #6B6259; margin-top: 4px; }
.pcs-p11-rule { height: 2px; background: var(--primary); width: 30px; margin: 10px 0; }
.pcs-p11-vitals { display: flex; flex-direction: column; gap: 5px; }
.pcs-p11-vitals .row { display: flex; justify-content: space-between; font: 500 10px var(--font-body); }
/* `.dt`/`.dd` class selectors, not `dt`/`dd` elements - these rows are
   plain <span>s now (see _card_studio_body.html's rail-tile markup),
   since <button>'s content model only allows phrasing content and a
   <dl>'s <dt>/<dd> (like the block-level <div>s this card used before
   the rail redesign) aren't phrasing content. */
.pcs-p11-vitals .dt { color: #948C81; margin: 0; }
.pcs-p11-vitals .dd { margin: 0; font-weight: 600; color: #14110F; }
.pcs-p11-stats { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(20, 17, 15, 0.12); display: flex; justify-content: space-between; }
.pcs-p11-stats .pcs-stat-num { font-size: 14px; color: #14110F; }
.pcs-p11-stats .pcs-stat-lab { font-size: 7.5px; color: #948C81; letter-spacing: 0.06em; display: block; margin-top: 2px; }

/* ══════════════════  P15 - Draft Card  ══════════════════ */
.pcs-p15 { background: #0a090b; display: flex; flex-direction: column; }
.pcs-p15-bar { padding: 6% 7%; display: flex; flex-direction: column; gap: 8px; border-bottom: 2px solid var(--primary); position: relative; z-index: 2; }
.pcs-p15-bar-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pcs-p15-num { font: 900 11px/1 var(--font-heading); color: var(--primary); border: 1px solid rgba(var(--primary-rgb), 0.55); border-radius: 4px; padding: 2px 7px; }
.pcs-p15-bar .name { font: 900 24px/1 var(--font-heading); text-transform: uppercase; }
.pcs-p15-meta { display: flex; align-items: baseline; gap: 14px; }
.pcs-p15-meta .team-line { font: 400 10px var(--font-body); color: var(--text-secondary); }
.pcs-p15-hero { margin-left: auto; text-align: right; }
.pcs-p15-hero .pcs-stat-num { font-size: 20px; color: var(--primary); }
.pcs-p15-hero .pcs-stat-lab { font-size: 7.5px; color: var(--text-muted); letter-spacing: 0.06em; display: block; }
.pcs-p15-photo { flex: 1; position: relative; }
.pcs-p15-photo .pcs-photo-fill { background-position: 50% 30%; }

/* ══════════════════  L4 - Jumbotron Marquee  ══════════════════ */
.pcs-l4 { background: #0a090b; }
.pcs-l4 .pcs-photo-fill { background-position: 80% 15%; }
.pcs-l4 .pcs-photo-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, #0a090b 8%, rgba(var(--primary-rgb), 0.4) 55%, #0a090b 100%);
}
.pcs-l4-top { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: 6% 6% 0; }
.pcs-l4-top .pcs-pos-badge { background: var(--primary); color: var(--on-primary); font-size: 10px; padding: 3px 8px; border-radius: 4px; }
.pcs-l4-marquee { position: relative; z-index: 3; padding: 4% 6% 0; }
.pcs-l4-marquee .name { font: 900 34px/0.86 var(--font-heading); text-transform: uppercase; letter-spacing: -0.01em; }
.pcs-l4-marquee .team-line { font: 400 10.5px var(--font-body); color: rgba(255, 255, 255, 0.62); margin-top: 5px; }
.pcs-l4-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; background: rgba(6, 6, 7, 0.65); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.pcs-l4-ticker .cell { flex: 1; text-align: center; padding: 8px 4px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.pcs-l4-ticker .cell:first-child { border-left: none; }
.pcs-l4-ticker .pcs-stat-num { font-size: 13px; color: #fff; }
.pcs-l4-ticker .pcs-stat-lab { font-size: 7px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; margin-top: 1px; }

/* ══════════════════  L5 - Roster Profile  ══════════════════ */
.pcs-l5 { background: #131114; display: flex; align-items: center; padding: 0 5.5%; gap: 5.5%; }
.pcs-l5-photo { position: relative; flex-shrink: 0; width: 30%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.65), 0 16px 26px -12px rgba(0, 0, 0, 0.6); }
.pcs-l5-content { position: relative; z-index: 2; flex: 1; }
.pcs-l5 .pcs-wordmark { margin-bottom: 5%; display: block; }
.pcs-l5-content .pcs-pos-badge { background: rgba(var(--primary-rgb), 0.18); color: var(--primary); font-size: 10px; padding: 3px 8px; border-radius: 5px; width: fit-content; }
.pcs-l5-content .name { font: 900 22px/1 var(--font-heading); text-transform: uppercase; margin-top: 8px; }
.pcs-l5-content .team-line { font: 400 10.5px var(--font-body); color: var(--text-secondary); margin-top: 4px; }
.pcs-l5-table { margin-top: 5%; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border-strong); }
.pcs-l5-table .cell { padding: 8px 3px 0; border-right: 1px solid var(--border); }
.pcs-l5-table .cell:last-child { border-right: none; }
.pcs-l5-table .pcs-stat-num { display: block; font-size: 14px; }
.pcs-l5-table .pcs-stat-lab { display: block; font-size: 7px; letter-spacing: 0.07em; color: var(--text-muted); margin-top: 2px; }

/* ══════════════════  L8 - Box Score Strip  ══════════════════ */
.pcs-l8 { background: #131114; display: grid; grid-template-columns: 1fr 140px; }
.pcs-l8-main { padding: 6% 0 6% 5.5%; display: flex; flex-direction: column; }
.pcs-l8-head { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.pcs-l8-head .name { font: 900 19px/1 var(--font-heading); text-transform: uppercase; }
.pcs-l8-head .pcs-pos-badge { background: rgba(var(--primary-rgb), 0.2); color: var(--primary); font-size: 10px; padding: 2px 7px; border-radius: 4px; }
.pcs-l8-team { font: 400 10px var(--font-body); color: var(--text-secondary); margin-top: 4px; }
.pcs-l8-table { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border-strong); }
.pcs-l8-table .cell { padding: 8px 3px 0; border-right: 1px solid var(--border); }
.pcs-l8-table .cell:last-child { border-right: none; }
.pcs-l8-table .pcs-stat-num { display: block; font-size: 13px; }
.pcs-l8-table .pcs-stat-lab { display: block; font-size: 6.5px; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; }
.pcs-l8-photo { position: relative; overflow: hidden; border-radius: 0 12px 12px 0; }

/* ══════════════════  L9 - Radar Chart  ══════════════════ */
.pcs-l9 { background: #101012; display: flex; align-items: center; padding: 0 5.5%; gap: 4%; }
.pcs-l9-left { flex: 1; }
.pcs-l9-left .name { font: 900 18px/1 var(--font-heading); text-transform: uppercase; margin-top: 7px; }
.pcs-l9-left .team-line { font: 400 9.5px var(--font-body); color: var(--text-secondary); margin-top: 4px; }
.pcs-l9-left .pcs-pos-badge { background: rgba(var(--primary-rgb), 0.2); color: var(--primary); font-size: 9.5px; padding: 2px 6px; border-radius: 4px; margin-top: 8px; width: fit-content; }
.pcs-l9-medallion { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; margin-top: 12px; box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.55); }
.pcs-l9-chart { flex-shrink: 0; width: 44%; }
.pcs-l9-axis-lab { font-family: var(--font-body); font-weight: 600; font-size: 7.5px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pcs-l9-axis-val { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; fill: var(--primary); }

/* ══════════════════  L10 - Trophy Ribbon  ══════════════════ */
.pcs-l10 { background: linear-gradient(120deg, #17151a, #100f11); position: relative; display: flex; align-items: center; }
.pcs-l10 .pcs-wordmark { position: absolute; top: 8%; left: 6%; z-index: 3; }
.pcs-l10-medallion { position: relative; z-index: 3; flex-shrink: 0; width: 118px; height: 118px; margin-left: 5%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #100f11, 0 0 0 6px rgba(var(--primary-rgb), 0.8), 0 12px 20px -10px rgba(0, 0, 0, 0.6); }
.pcs-l10-ribbon {
  position: relative; z-index: 2; flex: 1; margin-left: -34px; padding: 18px 26px 18px 52px;
  background: linear-gradient(100deg, var(--primary), var(--primary) 88%);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 6% 100%, 0 50%);
}
.pcs-l10-ribbon .name { font: 900 20px/1 var(--font-heading); text-transform: uppercase; color: var(--on-primary); }
.pcs-l10-ribbon .team-line { font: 600 9.5px var(--font-body); color: rgba(11, 10, 12, 0.72); margin-top: 5px; }
.pcs-l10-stats { position: relative; z-index: 3; margin-left: auto; margin-right: 6%; text-align: right; width: 92px; }
.pcs-l10-stats .v { display: block; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 26px; color: var(--text); line-height: 1; }
.pcs-l10-stats .l { display: block; font: 600 8px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 5px; }

/* ══════════════════════════════════════════════════════════════════
   "Pro" pass - 5 more looks (Foil Rookie, Championship Banner, Holo
   Insert, Split Score, Analytics Pro). Same token/helper vocabulary as
   the ten above (.pcs-photo-fill, .pcs-wordmark, .pcs-stat-num/-lab,
   var(--primary)/--gold/--teal/--violet) - no new design language
   introduced, just three more portrait compositions and two more
   landscape ones. ══════════════════════════════════════════════════ */

/* ══════════════════  P16 - Foil Rookie  ══════════════════ */
.pcs-p16 {
  position: relative;
  padding: 4px;
  /* Gradient BORDER via the padding trick (a solid-background inner
     element sits inside this padding, letting the gradient show only as
     a ring) rather than CSS mask/mask-composite - html2canvas (this
     card's eventual Download/Share rasterizer, see this file's own
     Download/Share comments) has uneven support for mask-composite, but
     a plain background gradient + padding always captures correctly. No
     animation on the gradient either way (prefers-reduced-motion is
     respected by simply never animating this, not a media-query
     opt-out). */
  background: conic-gradient(from 200deg, var(--gold), var(--primary), var(--teal), var(--violet), var(--gold));
}
.pcs-p16-inner { position: relative; height: 100%; border-radius: 15px; overflow: hidden; background: #0a090b; }
.pcs-p16-inner .pcs-photo-fill { background-position: 50% 16%; }
.pcs-p16-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 47%, rgba(255, 255, 255, 0.04) 55%, transparent 64%);
  pointer-events: none;
}
.pcs-p16-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 6% 7%; }
.pcs-p16-top .pcs-wordmark { color: var(--text); }
.pcs-p16-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 8% 7%;
  background: linear-gradient(0deg, rgba(10, 9, 11, 0.92) 20%, transparent 100%);
}
.pcs-p16-hero { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6%; }
.pcs-p16-hero .v { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 30px; color: var(--primary); line-height: 1; }
.pcs-p16-hero .l { font: 700 9px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.pcs-p16-bottom .name { font: 900 19px/1.05 var(--font-heading); text-transform: uppercase; color: var(--text); }
.pcs-p16-bottom .team-line { font: 500 10px var(--font-body); color: var(--text-secondary); margin-top: 4px; }

/* ══════════════════  P17 - Championship Banner  ══════════════════ */
.pcs-p17 {
  background: linear-gradient(180deg, #17141a 0%, #0a090b 70%);
  /* Pennant tail - a V-notch cut into the bottom edge, same clip-path
     approach L10's ribbon shape above uses, applied to the whole card
     instead of one inner band. */
  clip-path: polygon(0 0, 100% 0, 100% 91%, 50% 100%, 0 91%);
}
.pcs-p17-banner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 7% 9% 14%; height: 100%; }
.pcs-p17 .pcs-wordmark { align-self: flex-start; }
.pcs-p17-medallion {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; position: relative;
  margin-top: 8%;
  box-shadow: 0 0 0 3px #0a090b, 0 0 0 5px var(--gold), 0 10px 18px -8px rgba(0, 0, 0, 0.6);
}
.pcs-p17-banner .name { font: 900 18px/1.1 var(--font-heading); text-transform: uppercase; color: var(--text); margin-top: 7%; }
.pcs-p17-banner .team-line { font: 500 9.5px var(--font-body); color: var(--text-secondary); margin-top: 3px; }
.pcs-p17-rule { width: 40px; height: 2px; background: var(--gold); margin: 6% 0; }
.pcs-p17-hero .v { display: block; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 34px; color: var(--text); line-height: 1; }
.pcs-p17-hero .l { display: block; font: 700 9px var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); margin-top: 4px; }
.pcs-p17-strip { display: flex; gap: 18px; margin-top: 7%; }
.pcs-p17-strip .pcs-stat-num { display: block; font-size: 14px; color: var(--text); text-align: center; }
.pcs-p17-strip .pcs-stat-lab { display: block; font-size: 7px; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; text-align: center; }

/* ══════════════════  P18 - Holo Insert  ══════════════════ */
.pcs-p18 { position: relative; background: #0a090b; }
.pcs-p18 .pcs-photo-fill { background-position: 50% 18%; }
.pcs-p18-stripe {
  /* Plain alpha-blended gradient, not mix-blend-mode - html2canvas (this
     card's Download/Share rasterizer) doesn't reliably support blend
     modes, same reasoning as .pcs-p16's gradient-border comment above. */
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 32%, rgba(255, 255, 255, 0.22) 47%, rgba(255, 255, 255, 0.06) 55%, transparent 66%);
  pointer-events: none;
}
.pcs-p18-top { position: relative; z-index: 2; padding: 6% 7%; }
.pcs-p18-plate {
  position: relative; z-index: 2;
  margin: 30% 7% 0;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(10, 9, 11, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pcs-p18-plate .v { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 22px; color: var(--primary); }
.pcs-p18-plate .l { font: 700 9px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.pcs-p18-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 7% 7% 8%;
  background: linear-gradient(0deg, rgba(10, 9, 11, 0.94) 15%, transparent 100%);
}
.pcs-p18-bottom .name { font: 900 17px/1.1 var(--font-heading); text-transform: uppercase; color: var(--text); margin-bottom: 6%; }
.pcs-p18-strip { display: flex; gap: 10px; }
.pcs-p18-strip .pcs-stat-num { display: block; font-size: 12px; color: var(--text); }
.pcs-p18-strip .pcs-stat-lab { display: block; font-size: 6.5px; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 2px; }

/* ══════════════════  L11 - Split Score  ══════════════════ */
.pcs-l11 { position: relative; background: #0a090b; }
.pcs-l11-photo { position: absolute; inset: 0; }
.pcs-l11-photo .pcs-photo-fill { background-position: 78% 20%; }
.pcs-l11-diag {
  position: absolute;
  inset: 0;
  background: var(--primary);
  clip-path: polygon(0 0, 46% 0, 34% 100%, 0 100%);
}
.pcs-l11-stat { position: absolute; left: 6%; top: 14%; z-index: 2; }
.pcs-l11-stat .v { display: block; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 30px; color: var(--on-primary); line-height: 1; }
.pcs-l11-stat .l { display: block; font: 700 8.5px var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(20, 10, 3, 0.75); margin-top: 4px; max-width: 90px; }
.pcs-l11-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 4% 6%;
  background: linear-gradient(0deg, rgba(10, 9, 11, 0.92) 30%, transparent 100%);
}
.pcs-l11-bar .pcs-wordmark { color: var(--text); margin-bottom: 4px; }
.pcs-l11-bar .name { font: 800 15px/1 var(--font-heading); text-transform: uppercase; color: var(--text); }
.pcs-l11-bar .team-line { font: 500 9px var(--font-body); color: var(--text-secondary); margin-top: 2px; }

/* ══════════════════  L12 - Analytics Pro  ══════════════════ */
.pcs-l12 { background: #0e0d0f; padding: 6% 7%; display: flex; flex-direction: column; }
.pcs-l12-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6%; }
.pcs-l12 .pcs-wordmark { color: var(--text); }
.pcs-l12 .name { font: 800 15px/1 var(--font-heading); text-transform: uppercase; color: var(--text); }
.pcs-l12 .team-line { font: 500 9px var(--font-body); color: var(--text-secondary); margin-top: 3px; }
.pcs-l12-bars { display: flex; flex-direction: column; justify-content: center; gap: 6px; margin-top: auto; margin-bottom: auto; }
.pcs-l12-bars .row { display: grid; grid-template-columns: 28px 1fr 34px; align-items: center; gap: 8px; }
.pcs-l12-bars .pcs-stat-lab { font-size: 8px; color: var(--text-muted); }
.pcs-l12-bars .track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pcs-l12-bars .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--gold)); }
.pcs-l12-bars .pcs-stat-num { font-size: 11px; color: var(--text); text-align: right; }