/* player-page.css — LAB sample. Player pages reuse team-page.css chrome (panels, header,
   stat boxes, timeline, verdict); this file adds only the portrait plate + attribute bars +
   the World Cup career table tweaks. No design-token changes. */

/* ── header: player info on the left, framed pixel art on the right ── */
.pp-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pp-header .v1-header-main { flex: 1 1 300px; margin-top: 0; }
.pp-header .v1-header-id { padding-right: 0; }   /* override the team-page map clearance */
.pp-header .pp-portrait-plate { flex: 0 0 auto; }

/* mobile: header stacks to one column — centre the info + figure so it reads as a card */
@media (max-width: 720px) {
  .pp-header { justify-content: center; }
  .pp-header .v1-header-main { flex-basis: 100%; justify-content: center; }
  .pp-header .v1-header-id { text-align: center; }
  .pp-header .pp-nicks,
  .pp-header .v1-stars { display: flex; flex-wrap: wrap; justify-content: center; }
  .pp-header .pp-nick { margin: 0 2px 4px; }
  .pp-header .pp-portrait-plate { margin: 0 auto; }
}

/* ── portrait plate (frames the pixel bust like the nation-map plate) ── */
.pp-portrait-plate {
  background: var(--c-navy);
  border: 3px solid var(--c-sky);
  box-shadow: 0 0 0 1px var(--c-yellow), 4px 4px 0 var(--c-navy);
  padding: 12px 12px 10px;
  text-align: center;
}
.pp-portrait-plate .player-portrait-pixel,
.pp-portrait-plate .player-figure-pixel {
  display: block;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;   /* keep the pixel portrait crisp */
}
.pp-portrait-plate .player-portrait-pixel { width: 168px; }   /* head bust */
.pp-portrait-plate .player-figure-pixel  { width: 150px; }    /* full-body figure (taller) */
.pp-portrait-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-sky);
  letter-spacing: 1px;
  margin-top: 6px;
}

/* ── arcade attribute bars (editorial, NOT a forecast) ── */
.pp-attrs { display: grid; gap: 8px; margin-top: 6px; }
.pp-attr { display: grid; grid-template-columns: 90px 1fr 34px; align-items: center; gap: 10px; }
.pp-attr-label { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--c-sky); letter-spacing: 1px; }
.pp-attr-track {
  height: 14px;
  background: #06102a;
  border: 2px solid var(--c-sky);
  box-shadow: inset 0 0 0 1px #000;
}
.pp-attr-fill { display: block; height: 100%; background: var(--c-yellow); image-rendering: pixelated; }
.pp-attr-val { font-family: var(--font-chrome); font-size: var(--fs-xs); color: var(--c-yellow); text-align: right; }

/* ── World Cup career table: lean on .pixel-table; just colour the result cell ── */
.pp-wc-table .pp-win { color: var(--c-yellow); font-family: var(--font-ui); letter-spacing: 1px; }
.pp-wc-table .pp-out { color: var(--c-sky); }

/* mobile: a 5-column table forces horizontal scroll — restack each tournament as a
   labelled card (YEAR/HOST/APPS/GOALS/RESULT as label → value rows) so it fits the
   viewport with no horizontal scroll. Labels come from each cell's data-label. */
@media (max-width: 720px) {
  .tp-table-scroll { overflow-x: visible; }
  .tp-table-scroll .pp-wc-table { min-width: 0; }   /* defeat the .pixel-table 600px min-width */
  .pp-wc-table thead { display: none; }
  .pp-wc-table tbody, .pp-wc-table tr, .pp-wc-table td { display: block; width: 100%; }
  .pp-wc-table tr {
    margin-bottom: 10px;
    border: 2px solid var(--c-sky);
    box-shadow: 3px 3px 0 var(--c-navy);
  }
  .pp-wc-table tr:nth-child(even) td { background: transparent; }
  .pp-wc-table td,
  .pp-wc-table td:nth-child(3) {              /* override global center-align on APPS */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    border: none;
    border-bottom: 1px solid rgba(70,140,220,0.22);
  }
  .pp-wc-table td:last-child { border-bottom: none; }
  .pp-wc-table td::before {
    content: attr(data-label);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    color: var(--c-sky);
    letter-spacing: 1px;
    text-align: left;
  }
}

/* ── players index grid (pixel art + name + team) ── */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
@media (max-width: 480px) {
  .pl-grid { grid-template-columns: repeat(2, 1fr); }
}
.pl-card {
  display: block;
  text-decoration: none;
  background: var(--c-navy);
  border: 3px solid var(--c-sky);
  box-shadow: 0 0 0 1px var(--c-yellow), 4px 4px 0 var(--c-navy);
  padding: 10px 8px 8px;
  text-align: center;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.pl-card:hover,
.pl-card:focus {
  transform: translate(-2px, -2px);
  box-shadow: 0 0 0 1px var(--c-yellow), 6px 6px 0 var(--c-navy);
}
.pl-card-art .player-figure-pixel,
.pl-card-art .player-portrait-pixel {
  display: block;
  width: 104px;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
}
.pl-card-name {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-yellow);
  letter-spacing: 1px;
  margin-top: 8px;
  line-height: 1.4;
}
.pl-card-team {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-sky);
  letter-spacing: 1px;
  margin-top: 3px;
}

/* ── All-Time Legends: sepia/gold treatment, set apart from the 2026 stars ── */
.pl-legends-tagline {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: #e8c976;
  margin: 2px 0 10px;
  line-height: 1.3;
}
.pl-card--legend {
  /* parchment-dark sepia panel with a warm gold frame */
  background: #2a2008;
  border-color: #c9a227;
  box-shadow: 0 0 0 1px #e8c976, 4px 4px 0 #120c02;
}
.pl-card--legend:hover,
.pl-card--legend:focus {
  box-shadow: 0 0 0 1px #e8c976, 6px 6px 0 #120c02;
}
.pl-card--legend .pl-card-art .player-figure-pixel,
.pl-card--legend .pl-card-art .player-portrait-pixel {
  /* aged, golden-brown tint on the pixel portrait */
  filter: sepia(0.55) saturate(1.15) hue-rotate(-12deg) brightness(1.04);
}
.pl-card--legend .pl-card-name { color: #f0d488; }
.pl-card--legend .pl-card-team { color: #c9a227; }
.pl-card-era {
  font-family: var(--font-vt);
  font-size: var(--fs-md);
  color: #b88a2e;
  letter-spacing: 1px;
  margin-top: 2px;
}
/* current-page indicator in the nav bar — same box as .nav-bar a, highlighted yellow */
.nav-here {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-navy);
  background: var(--c-yellow);
  padding: 7px 12px;
  border: 2px solid;
  border-color: var(--c-gold) var(--c-yellow) var(--c-yellow) var(--c-gold);
  letter-spacing: 1px;
}

/* ── sticky bottom section nav (mweb only) ── */
.pl-bottom-nav { display: none; }

@media (max-width: 720px) {
  .pl-has-bottom-nav { padding-bottom: 64px; }
  .pl-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--c-navy);
    border-top: 3px solid var(--c-sky);
    box-shadow: 0 -2px 0 var(--c-yellow);
  }
  .pl-bottom-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    font-family: var(--font-chrome);
    font-size: var(--fs-xs);
    color: var(--c-yellow);
    text-decoration: none;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.4;
  }
  .pl-bottom-nav-btn + .pl-bottom-nav-btn {
    border-left: 2px solid var(--c-sky);
  }
  .pl-bottom-nav-btn--legend { color: #f0d488; }
  .pl-bottom-nav-btn:active { background: #0d1840; }

  /* Active tab: yellow bg + navy text, matching .nav-here on the top bar */
  /* Default: 2026 LEGENDS tab active on index page (before any scroll/click) */
  .pl-page-index ~ .pl-bottom-nav .pl-bottom-nav-btn:first-child,
  body:has(#roster:target) .pl-bottom-nav .pl-bottom-nav-btn:first-child {
    background: var(--c-yellow);
    color: var(--c-navy);
  }
  /* Switch to ALL-TIME LEGENDS when that section is targeted */
  body:has(#legends:target) .pl-bottom-nav .pl-bottom-nav-btn:first-child {
    background: transparent;
    color: var(--c-yellow);
  }
  body:has(#legends:target) .pl-bottom-nav .pl-bottom-nav-btn--legend {
    background: #c9a227;
    color: var(--c-navy);
  }
}

/* ── identity sub-line under the name ── */
.pp-id-line { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--c-sky); letter-spacing: 1px; margin-top: 4px; }
.pp-life { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--c-sky); opacity: .85; margin-top: 2px; }
.pp-nicks { margin-top: 6px; }
.pp-nick {
  display: inline-block; font-family: var(--font-ui); font-size: var(--fs-xs);
  color: var(--c-navy); background: var(--c-yellow); padding: 1px 6px; margin-right: 4px; letter-spacing: 1px;
}