/* CricRate player-profile refresh — stage 1, isolated presentation layer.
   Preserves all existing profile markup, data and rating calculation paths. */
.player-profile-page {
  --profile-ink: #182630;
  --profile-gold: #bc944e;
  --profile-line: #ded6c6;
  color: var(--profile-ink);
  max-width: 1180px;
  margin: 0 auto 48px;
}
.player-profile-page .profile-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: clamp(20px, 3vw, 38px);
  background: linear-gradient(130deg, #182630 0%, #263b45 70%, #305344 100%);
  border: 1px solid rgba(188,148,78,.5);
  border-radius: 22px 22px 0 0;
  color: #fdfaf3;
}
.player-profile-page .profile-page-head h1 {
  margin: 4px 0;
  font-size: clamp(1.65rem, 3.1vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: #fdfaf3;
}
.player-profile-page .profile-page-head .eyebrow {
  color: #e5d1a7;
  letter-spacing: .11em;
}
.player-profile-page .profile-page-actions {display:flex;flex-wrap:wrap;gap:8px}
.player-profile-page .profile-page-actions .btn {
  border: 1px solid rgba(244,228,193,.45);
  background: rgba(255,255,255,.08);
  color: #fdfaf3;
}
.player-profile-page .profile-page-actions .btn:focus-visible {
  outline: 3px solid #e8c47e;
  outline-offset: 3px;
}
.player-profile-page .profile-page-body {
  background: #fdfaf3;
  border: 1px solid var(--profile-line);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  padding: clamp(16px, 2.8vw, 34px);
}
.player-profile-page .metric,
.player-profile-page .rating-pill {font-variant-numeric:tabular-nums}
.player-profile-page .card {
  border-color: var(--profile-line);
  border-radius: 16px;
  box-shadow: 0 5px 18px rgba(24,38,48,.035);
}
.player-profile-page .card h2,
.player-profile-page .card h3 {letter-spacing:-.015em}
.player-profile-page .row {gap:12px}
.player-profile-page .row:focus-within {outline:2px solid var(--profile-gold);outline-offset:2px}
@media (max-width: 720px) {
  .player-profile-page {margin-bottom: 24px}
  .player-profile-page .profile-page-head {border-radius:14px 14px 0 0;padding:20px 16px}
  .player-profile-page .profile-page-body {padding:14px;border-radius:0 0 14px 14px}
  .player-profile-page .profile-page-actions {width:100%}
  .player-profile-page .profile-page-actions .btn {flex:1;min-width:0}
  .player-profile-page .row {align-items:flex-start}
}
@media (prefers-reduced-motion: reduce) {
  .player-profile-page *, .player-profile-page *::before, .player-profile-page *::after {
    transition:none!important;animation:none!important;
  }
}