/* BigPool UI refresh — player profile card. */
.pf-page { max-width: 760px; display: grid; grid-auto-rows: max-content; gap: 18px; align-content: start; }

/* ---------- Player card ---------- */
.pf-card { --ring: #b9824e; --ring-glow: rgba(185,130,78,0.35);
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 20px; padding: 26px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(120% 90% at 0% 0%, rgba(104,211,145,0.10), transparent 55%), radial-gradient(120% 120% at 100% 0%, rgba(217,180,93,0.10), transparent 55%), linear-gradient(160deg, #111712, #0b0f0c);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9); }
.pf-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(217,180,93,0.7) 30%, rgba(104,211,145,0.6) 70%, transparent); }
.pf-card.rank-silver { --ring: #c3ccd3; --ring-glow: rgba(195,204,211,0.3); }
.pf-card.rank-gold { --ring: #d9b45d; --ring-glow: rgba(217,180,93,0.4); }
.pf-card.rank-diamond, .pf-card.rank-platinum { --ring: #6fc6e8; --ring-glow: rgba(111,198,232,0.4); }
.pf-card.rank-master { --ring: #b48cff; --ring-glow: rgba(180,140,255,0.42); }
.pf-card .rank-chip.rank-master { color: #1b0e33; background: linear-gradient(180deg, #ddc9ff, #9a6cf0); box-shadow: 0 4px 14px rgba(154,108,240,0.35); }

.pf-identity { display: flex; align-items: center; gap: 20px; min-width: 0; }
.pf-avatar { flex: none; padding: 4px; border-radius: 50%; background: conic-gradient(from 210deg, var(--ring), rgba(255,255,255,0.08) 40%, var(--ring) 70%, rgba(255,255,255,0.08), var(--ring)); box-shadow: 0 0 26px var(--ring-glow); }
.pf-avatar .avatar { width: 96px; height: 96px; font-size: 28px; border: 3px solid #0d120e; }
.pf-id { display: grid; gap: 6px; min-width: 0; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(7,9,8,0.55); color: var(--text-soft); font: 800 11px var(--font-heading); letter-spacing: 1.2px; text-transform: uppercase; }
.pf-chip-you { color: var(--green-bright); border-color: rgba(104,211,145,0.3); background: rgba(104,211,145,0.1); }
.pf-id h1 { margin: 4px 0 0; font: 900 clamp(28px, 4vw, 40px)/1.05 BigPoolDisplay, var(--font-heading); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-id p { margin: 0; color: var(--muted); font: 700 14px var(--font-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Stats strip (matches the result page) ---------- */
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 12px 4px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.pf-stats > div { display: grid; gap: 3px; padding: 0 12px; min-width: 0; }
.pf-stats > div + div { border-left: 1px solid rgba(255,255,255,0.07); }
.pf-stats dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap; }
.pf-stats dd { margin: 0; font: 900 22px BigPoolDisplay, var(--font-heading); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stats .pf-stat-rating dd { color: var(--gold); text-shadow: 0 0 22px rgba(217,180,93,0.35); }

/* ---------- Actions: one primary, quiet secondaries ---------- */
.pf-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 10px; align-items: stretch; }
.pf-actions .btn { min-height: 46px; border-radius: 12px; }
.pf-primary { background: linear-gradient(180deg, #86e6a9, var(--green)); box-shadow: 0 12px 30px -14px rgba(104,211,145,0.8), inset 0 1px 0 rgba(255,255,255,0.4); font-size: 15px; }
.pf-secondary { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.pf-secondary .btn { white-space: nowrap; padding: 0 12px; }
.pf-secondary .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.pf-secondary .quick-actions .btn { min-height: 46px; }

/* ---------- Sections ---------- */
.pf-section { display: grid; gap: 10px; }
.pf-label { margin: 0 0 0 4px; color: var(--text-soft); font: 800 12px var(--font-heading); letter-spacing: 1.6px; text-transform: uppercase; }

/* Loadout showcase */
.pf-loadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-gear { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.07); background: radial-gradient(120% 120% at 0% 0%, rgba(217,180,93,0.08), transparent 60%), linear-gradient(160deg, #121813, #0b0f0c); transition: border-color .18s, transform .18s; }
.pf-gear:hover { border-color: rgba(217,180,93,0.32); transform: translateY(-1px); }
.pf-gear-art { height: 64px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.pf-gear-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pf-gear-cue .pf-gear-art img { width: 140%; max-width: none; transform: rotate(-14deg); }
.pf-gear-copy { display: grid; gap: 2px; min-width: 0; }
.pf-gear-copy span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.pf-gear-copy strong { font: 800 15px var(--font-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-gear-copy small { color: var(--gold); font: 800 11px var(--font-heading); letter-spacing: 0.6px; }

/* Recent matches */
.pf-matches { display: grid; gap: 8px; }
.pf-match { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)); transition: border-color .18s, transform .18s; }
.pf-match:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-1px); }
.pf-wl { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 900 14px BigPoolDisplay, var(--font-heading); }
.pf-match.is-win .pf-wl { color: #2b1d04; background: linear-gradient(180deg, #ffe39a, #d9b45d); box-shadow: 0 0 14px rgba(217,180,93,0.3); }
.pf-match.is-loss .pf-wl { color: var(--muted); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.pf-match .avatar { width: 34px; height: 34px; font-size: 11px; }
.pf-match-main { display: grid; gap: 2px; min-width: 0; }
.pf-match-main strong { font: 800 14px var(--font-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-match-main strong a { color: inherit; text-decoration: none; }
.pf-match-main strong a:hover { color: var(--green-bright); }
.pf-match-main span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-match-side { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; }
.pf-match-side b { font: 900 16px BigPoolDisplay, var(--font-heading); }
.pf-match-side i { font-style: normal; color: var(--muted); margin: 0 3px; }
.pf-match-side small { font: 800 12px var(--font-heading); }
.pf-match-side small.up { color: var(--green-bright); }
.pf-match-side small.down { color: var(--red); }

/* Own profile: account links on mobile */
.pf-page .mobile-profile-account { margin: 0; }
.pf-page .mobile-profile-account .section-heading h2 { margin: 0 0 0 4px; color: var(--text-soft); font: 800 12px var(--font-heading); letter-spacing: 1.6px; text-transform: uppercase; }
.pf-page .mobile-profile-links { display: grid; gap: 8px; }
.pf-page .mobile-profile-links .btn { min-height: 48px; border-radius: 12px; }

@media (max-width: 720px) {
  .pf-page { gap: 14px; }
  .pf-card { padding: 20px 16px 16px; border-radius: 18px; gap: 16px; }
  .pf-identity { gap: 14px; }
  .pf-avatar { padding: 3px; }
  .pf-avatar .avatar { width: 76px; height: 76px; font-size: 22px; }
  .pf-id h1 { font-size: 26px; }
  .pf-id p { font-size: 13px; }
  .pf-chip, .pf-card .rank-chip { height: 22px; padding: 0 9px; font-size: 10px; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; padding: 12px 0; }
  .pf-stats > div:nth-child(3) { border-left: 0; }
  .pf-stats dd { font-size: 20px; }
  .pf-actions { grid-template-columns: 1fr; }
  .pf-primary { min-height: 50px !important; }
  .pf-loadout { grid-template-columns: 1fr; }
  .pf-gear { grid-template-columns: 84px minmax(0, 1fr); padding: 10px; }
  .pf-gear-art { height: 56px; }
  .pf-match { gap: 10px; padding: 10px 12px; }
  .pf-match .avatar { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-gear, .pf-match { transition: none; }
  .pf-gear:hover, .pf-match:hover { transform: none; }
}
