/* ============================================================
   WC26 Hub · player card modal (js/playercard.js) · PAGE 302
   (teletext + pixel). A collectible pixel panel: chunky flag
   mosaic behind the header, gold-framed square photo, pixel FC
   numeral in a rating block, cyan section caps.
   Scoped under .pcard · the class is added to the .modal element.
   ============================================================ */

.modal.pcard {
  max-width: 520px;
  padding: 0;
  overflow: hidden;          /* the band bleeds edge-to-edge */
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}

/* ---------------- header band (team-tinted) ---------------- */

.pcard .pcard-band {
  position: relative;
  overflow: hidden;
  background: #000;
  border-bottom: 2px solid var(--line-2);
  flex-shrink: 0;
}
/* the team flag blown up into chunky pixels behind the header */
.pcard .pcard-band::before {
  content: '';
  position: absolute;
  inset: -36px;
  background-image: var(--pcard-flag, none);
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
  filter: saturate(.9) brightness(.55);
  opacity: .4;
}
.pcard .pcard-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .85));
}

.pcard .pcard-id {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

/* photo slot: avatar instantly, async swap to a square sticker */
.pcard .pcard-photo {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--gold), 4px 4px 0 #000;
}
.pcard .pcard-photo .avatar {
  width: 100%;
  height: 100%;
  font-size: 1.35rem;
}
.pcard .pcard-photo .player-photo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  object-fit: cover;
  background: var(--surface-2);
}

.pcard .pcard-who { min-width: 0; flex: 1; }

.pcard .pcard-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}
.pcard .pcard-num {
  font-family: var(--font-cond);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.pcard .pcard-team {
  display: inline-flex;
  margin-top: 4px;
  font-size: .95rem;
  font-weight: 400;
  color: var(--text-dim);
  text-decoration: none;
}
.pcard .pcard-team:hover { color: var(--cyan); }
.pcard .pcard-team .team-label { gap: 6px; }

.pcard .pcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .9rem;
  color: var(--text-dim);
}
.pcard .pcard-dot { color: var(--text-faint); }

.pcard .pcard-role,
.pcard .pcard-pos {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: 0;
  font-family: var(--font-cond);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.pcard .pcard-pos-GK { color: var(--gold); }  /* keeper gold · matches avatar-GK cell */
.pcard .pcard-pos-DF { color: var(--cyan); }
.pcard .pcard-pos-MF { color: var(--green); }
.pcard .pcard-pos-FW { color: #ff8a8a; }      /* lightened red · readable on surface-3 */

/* ---------------- FC 26 rating: pixel numeral in a rating block ---------------- */

.pcard .pcard-fc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pcard .pcard-fc-label {
  font-family: var(--font-cond);
  font-size: .55rem;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--cyan);
}
.pcard .fcp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  padding: 7px 9px;
  background: rgba(0, 0, 0, .6);
  border: 2px solid currentColor;
  box-shadow: 3px 3px 0 #000;
  cursor: default;
}
/* 85+ - the one gold tier (trophy moment) */
.pcard .fcp-gold { color: var(--gold); }
.pcard .fcp-green { color: var(--green); }
.pcard .fcp-blue { color: var(--cyan); }
.pcard .fcp-dim { color: var(--text-dim); }

/* ---------------- body sections ---------------- */

.pcard .pcard-body {
  padding: 4px 20px 8px;
  overflow-y: auto;
}

.pcard .pcard-sec {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.pcard .pcard-sec:last-child { border-bottom: 0; }

/* cyan section cap + checkered rule, index style */
.pcard .pcard-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-cond);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}
.pcard .pcard-sec-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 10px);
}

/* key/value rows in the WC 2026 section */
.pcard .pcard-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: .95rem;
}
.pcard .pcard-row-ico { width: 18px; text-align: center; flex-shrink: 0; }
.pcard .pcard-row-k {
  width: 56px;
  flex-shrink: 0;
  font-family: var(--font-cond);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pcard .pcard-row-v { min-width: 0; color: var(--text-dim); }
.pcard .pcard-row-v b { color: var(--text); }

.pcard .pcard-wdl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 0;
  font-family: var(--font-cond);
  font-size: .62rem;
  font-weight: 400;
  vertical-align: 1px;
}
.pcard .pcard-wdl-W { background: var(--green); color: #003314; }
.pcard .pcard-wdl-D { background: var(--surface-3); color: var(--text-dim); }
.pcard .pcard-wdl-L { background: var(--red); color: #fff; }

/* ---------------- World Cup career ---------------- */

.pcard .pcard-hist {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.pcard .pcard-hist th,
.pcard .pcard-hist td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.pcard .pcard-hist th {
  font-family: var(--font-cond);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--cyan);
}
.pcard .pcard-hist th.num,
.pcard .pcard-hist td.num { text-align: right; }
.pcard .pcard-hist tr:last-child td { border-bottom: 0; }
.pcard .pcard-hist-total td {
  font-weight: 400;
  color: var(--gold);
  border-top: 2px solid var(--line-2);
}

.pcard .pcard-career-empty {
  font-size: .95rem;
  color: var(--text-dim);
}
.pcard .pcard-note {
  margin-top: 7px;
  font-size: .9rem;
  font-style: normal;
  color: var(--text-faint);
}

/* ---------------- club connections ---------------- */

.pcard .pcard-mates {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.pcard .pcard-mate {
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
}

/* ---------------- footer ---------------- */

.pcard .pcard-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 2px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}

/* ---------------- mobile ---------------- */

@media (max-width: 480px) {
  .pcard .pcard-id { padding: 14px 14px; gap: 11px; }
  .pcard .pcard-photo { width: 58px; height: 58px; }
  .pcard .pcard-photo .avatar { font-size: 1.1rem; }
  .pcard .pcard-name { font-size: .85rem; }
  .pcard .fcp { font-size: 1.1rem; }
  .pcard .pcard-body { padding: 2px 14px 6px; }
  .pcard .pcard-foot { padding: 10px 14px 14px; }
}