/* ==========================================================================
   COMBINE — combine-card.css
   NBA-2K-style player reveal card. Scoped to .cb-pcard* / .cb-pstat* /
   .cb-pcat* / .cb-pattr* / .cb-pbadge* only. Disjoint from the spin
   screen's build card (.cb-card*, .cb-phys*, .cb-cat*, .cb-attr*).
   ========================================================================== */

/* ---------------------------------------------------------------------
   A) Card shell
   --------------------------------------------------------------------- */
.cb-pcard {
  --cb-pcard-tier: var(--cb-accent);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  background: color-mix(in srgb, var(--cb-pcard-tier) 8%, var(--c-panel));
  border-radius: var(--r-md);
}
.cb-pcard--modal {
  width: 100%;
}
/* Legendary (grade A) glow — a pulse, not a clipped sweep, since the
   sticky hero inside would fight overflow:hidden on this root. */
.cb-pcard[data-grade="A"] {
  animation: cb-legendary-pulse 2.4s ease-in-out infinite;
}
/* Epic (grade B) — quieter radiating pulse on the whole card, no sweep. */
.cb-pcard[data-grade="B"] {
  animation: cb-epic-pulse 3.2s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   B) Hero (portrait + identity + overall badge)
   --------------------------------------------------------------------- */
.cb-pcard__hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding-bottom: var(--s-4);
  border-bottom: var(--bw) solid var(--c-line);
}
/* Pin the payoff (portrait/name/OVR) to the top of the scrolling modal body
   so it stays on screen alongside SAVE TO TEAM instead of scrolling apart —
   the card runs far taller than .modal__body's 70vh. The negative margin
   cancels .modal__body's own padding so the sticky strip sits flush with
   the body's top edge and still fully covers the category list underneath
   as it scrolls past. */
.cb-pcard--modal .cb-pcard__hero {
  position: sticky;
  top: calc(-1 * var(--s-5));
  z-index: 5;
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0;
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: color-mix(in srgb, var(--cb-pcard-tier) 8%, var(--c-panel));
}
@media (max-width: 640px) {
  .cb-pcard__hero {
    grid-template-columns: auto 1fr;
  }
  .cb-pcard__badgegroup {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.cb-pcard__portrait {
  position: relative;
  width: calc(var(--cb-headshot-h) * 0.72);
  height: var(--cb-headshot-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: var(--bw) solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--cb-hardwood-2), var(--cb-hardwood));
  box-shadow: inset 0 1px 0 var(--c-line-2);
}
.cb-pcard__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, var(--c-gold-a10), transparent 70%);
  pointer-events: none;
}
.cb-pcard__silhouette {
  position: relative;
  width: 72%;
  height: auto;
  color: var(--cb-accent-dim);
  opacity: 0.55;
  margin-bottom: 0;
}
.cb-pcard__pos {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--cb-accent-bright);
}
.cb-pcard__jersey {
  /* Top-right, mirroring .cb-pcard__pos in the opposite corner — the
     silhouette's shoulders live along the bottom edge, so a bottom-right
     placement collided with them (measured bounding-box intersection). */
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  font-family: var(--cb-font-num);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--cb-line-white);
  opacity: 0.85;
}

.cb-pcard__id {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.cb-pcard__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text);
  overflow-wrap: break-word;
}
.cb-pcard__posname {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.cb-pcard__tier {
  align-self: flex-start;
  margin-top: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: var(--bw) solid var(--cb-pcard-tier);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--cb-pcard-tier) 12%, transparent);
  color: var(--cb-pcard-tier);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cb-pcard__date {
  font-family: var(--cb-font-num);
  font-size: var(--fs-small);
  color: var(--c-text-3);
  letter-spacing: 0.08em;
}

.cb-pcard__badgegroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}
.cb-pcard__grade {
  --cb-pcard-grade: var(--cb-pcard-tier);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  padding: 2px var(--s-2);
  border: var(--bw) solid var(--cb-pcard-grade);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cb-pcard-grade) 16%, transparent);
  color: var(--cb-pcard-grade);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
}
.cb-pcard__badge {
  width: calc(var(--cb-badge-size) * 1.35);
  height: calc(var(--cb-badge-size) * 1.35);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--cb-pcard-tier) 55%, transparent);
  position: relative;
  overflow: hidden;
}
.cb-pcard[data-grade="A"] .cb-pcard__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 60%;
  background: linear-gradient(115deg, transparent 15%, color-mix(in srgb, var(--cb-grade-a) 70%, white 25%) 50%, transparent 85%);
  animation: cb-legendary-sweep 2.6s ease-in-out infinite;
  pointer-events: none;
}
/* Epic (grade B) — a quiet radiating pulse, not the legendary sweep. */
.cb-pcard[data-grade="B"] .cb-pcard__badge {
  animation: cb-epic-pulse 3.2s ease-in-out infinite;
}
.cb-pcard__badge-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.25rem;
  line-height: 0.9;
  color: var(--cb-pcard-tier);
  font-variant-numeric: tabular-nums;
}
.cb-pcard__badge-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  color: var(--c-text-3);
}

/* ---------------------------------------------------------------------
   C) Physicals
   --------------------------------------------------------------------- */
.cb-pcard__phys {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
}
@media (max-width: 560px) {
  .cb-pcard__phys {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cb-pstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  text-align: center;
  background: var(--c-panel-2);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  min-height: 84px;
  min-width: 0;
}
.cb-pstat__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.cb-pstat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.cb-pstat__sub {
  font-family: var(--cb-font-num);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--c-text-2);
  min-height: 1em;
}

/* ---------------------------------------------------------------------
   D) Badges
   --------------------------------------------------------------------- */
.cb-pcard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.cb-pbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: var(--bw) solid var(--c-gold-dim);
  border-radius: var(--r-xs);
  background: var(--c-gold-a10);
  color: var(--cb-accent-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: help;
}
.cb-pbadge:hover,
.cb-pbadge:focus-visible {
  background: var(--c-gold-a20);
  border-color: var(--c-gold);
  outline: none;
}
.cb-pbadge__ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   D2) Archetype
   --------------------------------------------------------------------- */
.cb-pcard__archetype {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  border: var(--bw) solid color-mix(in srgb, var(--cb-arch-mixed) 45%, transparent);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--cb-arch-mixed) 10%, transparent);
}
.cb-pcard__archetype[data-arch-tag="boost"] {
  border-color: color-mix(in srgb, var(--cb-arch-boost) 45%, transparent);
  background: color-mix(in srgb, var(--cb-arch-boost) 10%, transparent);
}
.cb-pcard__archetype[data-arch-tag="flawed"] {
  border-color: color-mix(in srgb, var(--cb-arch-flawed) 45%, transparent);
  background: color-mix(in srgb, var(--cb-arch-flawed) 10%, transparent);
}
.cb-pcard__archetype[data-arch-tag="legendary"] {
  border-color: color-mix(in srgb, var(--cb-arch-legendary) 60%, transparent);
  background: color-mix(in srgb, var(--cb-arch-legendary) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cb-arch-legendary) 30%, transparent);
}
.cb-parchetype__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text);
}
.cb-pcard__archetype[data-arch-tag="boost"] .cb-parchetype__name { color: var(--cb-arch-boost); }
.cb-pcard__archetype[data-arch-tag="flawed"] .cb-parchetype__name { color: var(--cb-arch-flawed); }
.cb-pcard__archetype[data-arch-tag="mixed"] .cb-parchetype__name { color: var(--cb-arch-mixed); }
.cb-pcard__archetype[data-arch-tag="legendary"] .cb-parchetype__name { color: var(--cb-arch-legendary); }
.cb-parchetype__blurb {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  color: var(--c-text-2);
}
.cb-parchetype__mods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}
.cb-parchetype__mod {
  font-family: var(--cb-font-num);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cb-parchetype__mod--pos {
  color: var(--c-ok);
}
.cb-parchetype__mod--neg {
  color: var(--c-bad);
}

/* ---------------------------------------------------------------------
   E) Skill categories
   --------------------------------------------------------------------- */
.cb-pcard__cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: var(--s-4);
}
@media (max-width: 760px) {
  .cb-pcard__cats {
    grid-template-columns: 1fr;
  }
}
/* 7 categories in a 2-up grid orphans the last one alone in the left
   column with an empty cell beside it — span it full width and lay its
   own attrs out in 2 sub-columns instead. */
.cb-pcat[data-cat="intangibles"] {
  grid-column: 1 / -1;
}
.cb-pcat[data-cat="intangibles"] .cb-pcat__rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-4);
}
@media (max-width: 760px) {
  .cb-pcat[data-cat="intangibles"] .cb-pcat__rows {
    grid-template-columns: 1fr;
  }
}
.cb-pcat {
  --cb-pcat-hue: var(--cb-accent);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--c-panel-2);
  border: var(--bw) solid var(--c-line);
  border-left: 2px solid var(--cb-pcat-hue, var(--cb-accent));
  border-radius: var(--r-sm);
  min-width: 0;
}
.cb-pcat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: var(--bw) solid var(--c-line);
}
.cb-pcat__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cb-pcat-hue);
}
.cb-pcat__rating {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat-num-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cb-pcat__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.cb-pattr {
  display: grid;
  grid-template-columns: 46px 1fr 52px;
  align-items: center;
  gap: var(--s-2);
}
.cb-pattr__label {
  font-family: var(--cb-font-num);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--c-text-3);
  text-transform: uppercase;
  cursor: help;
}
.cb-pattr__bar {
  position: relative;
  display: block;
  height: var(--cb-bar-h);
  border-radius: var(--cb-bar-r);
  background: var(--cb-bar-track);
  overflow: hidden;
}
.cb-pattr__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--cb-bar-r);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cb-pcat-hue) 55%, transparent), var(--cb-pcat-hue));
  transition: width var(--dur-slow) var(--cb-ease-land);
}
.cb-pcard.is-revealed .cb-pattr__fill {
  width: var(--w, 0%);
}
.cb-pattr__value {
  justify-self: end;
  font-family: var(--cb-font-num);
  font-weight: 700;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
/* The grade color on a pct attr (three_pt/fg_pct/ft_pct) is computed on the
   normalized 0-99 rating, not the printed raw percentage, so e.g. a grey
   "41.1%" can sit right above a brighter-looking "78" rating and read as
   an arbitrary color choice. Demote the raw-percentage printout a size
   down so it visibly reads as a different (finer-grained, real-world)
   scale from the 0-99 ratings rather than a directly-comparable number. */
.cb-pattr[data-unit="pct"] .cb-pattr__value {
  font-size: var(--fs-label);
  font-weight: 600;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------
   E2) Radar chart — 7 vertices, one per SKILL_CATEGORIES summary rating.
   Ported from combine-fc's .fc-card__radar/.fc-radar__* (css/pitch-screens.css).
   --------------------------------------------------------------------- */
.cb-pcard__radar {
  --cb-radar-tier: var(--cb-accent);
  --cb-radar-group: var(--cb-accent);
  width: 100%;
  max-width: 220px;
  margin: var(--s-4) auto 0;
}
.cb-pcard__radar svg {
  width: 100%;
  height: auto;
}
.cb-radar__grid {
  fill: none;
  stroke: var(--c-line-2);
  stroke-width: 1;
}
.cb-radar__shape {
  fill: color-mix(in srgb, var(--cb-radar-group) 26%, transparent);
  stroke: var(--cb-radar-group);
  stroke-width: 2;
  transform-origin: 100px 100px;
  animation: cb-radar-in var(--dur-reveal) var(--cb-ease-land) both;
}
@media (prefers-reduced-motion: reduce) {
  .cb-radar__shape {
    animation: none;
  }
}
.cb-radar__node {
  fill: var(--cb-radar-group);
}
.cb-radar__label {
  fill: var(--c-text-3);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-anchor: middle;
}
@keyframes cb-radar-in {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------------
   F) Grade colours — shared by attribute values and category ratings
   --------------------------------------------------------------------- */
.cb-pattr[data-grade="elite"] .cb-pattr__value,
.cb-pcat__rating[data-grade="elite"] {
  color: var(--cb-accent-bright);
}
.cb-pattr[data-grade="high"] .cb-pattr__value,
.cb-pcat__rating[data-grade="high"] {
  color: var(--cb-accent);
}
.cb-pattr[data-grade="mid"] .cb-pattr__value,
.cb-pcat__rating[data-grade="mid"] {
  color: var(--c-text);
}
.cb-pattr[data-grade="low"] .cb-pattr__value,
.cb-pcat__rating[data-grade="low"] {
  color: var(--c-text-2);
}
.cb-pattr[data-grade="poor"] .cb-pattr__value,
.cb-pcat__rating[data-grade="poor"] {
  color: var(--c-text-3);
}

/* Archetype-modified attributes override the grade color above with a
   pos/neg tint so a boosted or nerfed stat reads at a glance, matching
   the +/- callouts in the archetype summary block. */
.cb-pattr[data-grade] .cb-pattr__value--pos {
  color: var(--c-ok);
}
.cb-pattr[data-grade] .cb-pattr__value--neg {
  color: var(--c-bad);
}

/* ---------------------------------------------------------------------
   G) Actions
   --------------------------------------------------------------------- */
.cb-pcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--bw) solid var(--c-line);
}
.cb-pcard__actions .btn {
  flex: 1 1 auto;
  min-width: 160px;
}

#cb-btn-save-team.is-saved {
  border-color: var(--c-ok);
  color: var(--c-ok);
  background: transparent;
}

/* ---------------------------------------------------------------------
   H) Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cb-pattr__fill {
    transition: none;
    transition-delay: 0s !important;
  }
}