/* ============================================================
   PlayCaller — Universal Player Card
   Extends the existing .player-card block in design-system.css
   (position badges, hover-lift, gold shimmer, left-border injury
   status strip — all untouched, shared for free, via design-system.css's
   own --surface-1/--border-card/--gold-glow/--status-*/--sport-* tokens).
   Pages using this file MUST also link /css/design-system.css for that
   base block.

   Adds: photo slot, stat-card, blurb, the continuous-gradient temperature
   strip, and compact/full layout variants. These NEW rules deliberately
   use literal brand color/font values instead of design-system.css's
   --gold/--gold-dim/--text-*/--font-* custom properties — feed.html
   defines its own local :root with the SAME names but different values
   (e.g. --gold-dim is a translucent rgba() overlay there, a solid hex in
   design-system.css), so a var()-based rule would render differently
   depending on which page it's on. Literal values guarantee the new
   component looks identical everywhere, regardless of what a host page's
   own tokens happen to be. Values match design-system.css's tokens
   exactly: gold #C9A84C, gold-dim #8B7A3D, text-primary #E8E2D6,
   text-secondary #9A917F, text-muted #5C5647.
   ============================================================ */

/* ─── Photo / initials avatar ──────────────────────────────── */

.player-card__photo-wrap,
.player-card__initials {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.player-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Canonical fallback look, ported from feed.html's .player-avatar —
   shown when resolvePhotoUrl() returns null, or the <img> onerror fires. */
.player-card__initials {
  background: #8B7A3D;
  border: 2px solid rgba(201, 168, 76, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: #C9A84C;
}

.player-card--full .player-card__photo-wrap,
.player-card--full .player-card__initials {
  width: 76px;
  height: 76px;
  aspect-ratio: 1 / 1;
  font-size: 24px;
}

/* ─── Temperature strip — continuous gradient, not a tier ──────
   ONE fixed multi-stop gradient image, sized much wider than the
   card. player-card.js sets --card-temp-pct (0%-100%) inline per
   card; shifting background-position-x samples a continuous point
   along the ramp (the browser's native multi-stop interpolation,
   not a JS color computation — see player-temperature.js header
   for why). Low opacity so it reads as an ambient wash behind
   content, not a competing border (the existing left-edge 4px
   strip stays wired to injury status, untouched). */
.player-card__temp-strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    #6496c8 0%,
    #e0a93c 45%,
    #f06432 70%,
    #c9a84c 100%
  );
  background-size: 600% 100%;
  background-position-x: var(--card-temp-pct, 50%);
  opacity: 0.13;
}

.player-card__body,
.player-card__photo-wrap,
.player-card__initials,
.player-card__expand-toggle {
  position: relative;
  z-index: 1;
}

/* ─── Stat card ─────────────────────────────────────────────── */

.player-card__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px 18px;
  margin-top: 12px;
}

.player-card__stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9A917F;
}

.player-card__stat-value {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  color: #E8E2D6;
  margin-top: 2px;
}

/* ─── Temperature label + honesty caption ──────────────────────
   basis: 'transparent_stat' renders identically to 'validated_model'
   (doctrine requires honest labeling, not visual suppression of
   real information) — the caption is where the distinction lives. */

.player-card__temp-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9A917F;
  margin-top: 10px;
}

.player-card__temp-caption {
  display: block;
  font-size: 10px;
  color: #5C5647;
  font-style: italic;
  margin-top: 2px;
}

/* ─── Blurb ─────────────────────────────────────────────────── */

.player-card__blurb {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1.55;
  color: #9A917F;
  margin-top: 10px;
}

.player-card__blurb--pending {
  opacity: 0.5;
}

/* ─── Compact variant — dense row, stats/blurb collapsed ──────
   Mock Draft card-list, Draft Engine trending board, Live Draft
   pool, Showdown pool. Tap/click expands .player-card__detail-panel
   (inserted/removed by player-card.js, same pattern as
   live-draft.html's existing togglePopover()). */

.player-card--compact {
  cursor: pointer;
}

.player-card--compact > .player-card__stats,
.player-card--compact > .player-card__blurb,
.player-card--compact > .player-card__temp-label {
  display: none;
}

.player-card__expand-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #5C5647;
  font-size: 15px;
  padding: 4px 8px;
  line-height: 1;
}

.player-card__expand-toggle:hover {
  color: #C9A84C;
}

.player-card__detail-panel {
  position: relative;
  z-index: 1;
  flex-basis: 100%;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 168, 76, 0.06);
}

/* ─── Full variant — everything inline, no interaction needed ──
   Feed dossier, player profile page, Showdown comparison. */

.player-card--full {
  flex-direction: column;
  align-items: stretch;
  padding: 20px 22px;
}

.player-card--full .player-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-card--full .player-card__expand-toggle {
  display: none;
}