/* Leaderboard, Rewards and Profile views. Builds on styles.css tokens. */

/* ---------- Leaderboard ---------- */
.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.lb-hero { display: flex; flex-direction: column; gap: 20px; background: linear-gradient(135deg, var(--navy) 0%, var(--surface) 70%); }
.lb-hero-main { display: flex; gap: 22px; align-items: center; }
.lb-rank {
  flex-shrink: 0; width: 112px; height: 112px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ffb07f, var(--orange) 60%, #b8430d); color: var(--on-orange);
  font: 700 46px/1 var(--font-display); border: 3px solid rgba(255,255,255,.85); box-shadow: 0 0 0 6px var(--orange-soft);
}
.lb-rank small { font: 600 11px var(--font-display); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
.lb-hero-title { font-size: clamp(24px, 3vw, 32px); }
.lb-hero-stats { gap: 36px; }
.lb-table .lb-rank-cell { width: 64px; font: 700 20px var(--font-display); color: var(--muted); }
.lb-medal { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 16px; color: var(--on-orange); }
.lb-medal-1 { background: var(--gold); }
.lb-medal-2 { background: #cfd8e3; }
.lb-medal-3 { background: #d08a4f; }
.lb-handle { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-pts { font: 700 18px var(--font-display); }
.lb-table .me-row .lb-rank-cell { color: var(--orange-2); }
.lb-ladder { position: sticky; top: calc(var(--topbar-h) + 16px); }
.lb-ladder-table td { padding: 9px 8px; font-size: 14px; }
.lb-ladder-table th { padding: 8px; }
.lb-bar-col { width: 40%; }
.lb-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.lb-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.lb-big-tier .lb-bar > span { background: linear-gradient(90deg, #c99a33, var(--gold)); }
.lb-big-tier td { background: rgba(255,194,74,.04); }

/* ---------- Rewards ---------- */
.rw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.rw-aside { position: sticky; top: calc(var(--topbar-h) + 16px); }
.rw-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; transition: border-color .2s; }
.rw-card:hover { border-color: rgba(242,101,34,.45); }
.rw-card.is-redeemed { border-color: rgba(47,217,142,.4); }
.rw-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start;
  background: var(--navy); border-radius: 12px; padding: 10px 6px; border-top: 3px solid var(--orange); text-align: center;
  font-family: var(--font-display); text-transform: uppercase; line-height: 1;
}
.rw-date b { font-size: 12px; letter-spacing: .12em; color: var(--orange-2); font-weight: 500; }
.rw-date span { font-size: 32px; font-weight: 700; margin: 4px 0 2px; }
.rw-date small { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.rw-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rw-body h3 { font-size: 22px; }
.rw-matchup { font: 600 14px var(--font-display); text-transform: uppercase; color: var(--text); letter-spacing: .03em; }
.rw-matchup .vs { color: var(--orange); margin: 0 4px; }
.ev-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.rw-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font: 600 12px var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.rw-tag-exp { background: var(--orange-soft); color: var(--orange-2); }
.rw-tag-nil { background: rgba(0,178,255,.14); color: var(--live); }
.rw-tag-merch { background: rgba(255,194,74,.14); color: var(--gold); }
.rw-cost { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg-2); border-radius: 10px; padding: 10px 14px; }
.rw-cost b { font: 700 22px var(--font-display); }
.rw-cost div:first-child b { color: var(--orange-2); }
.rw-cost small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.rw-how h2 { font-size: 28px; }
.rw-steps { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.rw-steps li { display: flex; gap: 14px; align-items: center; background: var(--bg-2); border-radius: 10px; padding: 10px 12px; }
.rw-steps b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.rw-steps small { color: var(--muted); font-size: 13px; }
.rw-step-pts { flex-shrink: 0; min-width: 64px; font: 700 22px var(--font-display); color: var(--orange-2); }
.rw-total { border-top: 1px solid var(--line); padding-top: 12px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.rw-notes { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rw-notes li { display: flex; gap: 10px; align-items: flex-start; }
.rw-notes svg { flex-shrink: 0; color: var(--orange); margin-top: 2px; }

/* ---------- Profile ---------- */
.pf-head { display: flex; flex-direction: column; gap: 24px; background: linear-gradient(135deg, var(--navy) 0%, var(--surface) 75%); }
.pf-id { display: flex; gap: 20px; align-items: center; }
.pf-name { font-size: clamp(30px, 4.5vw, 48px); }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 14px; }
.pf-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pf-meta svg { width: 15px; height: 15px; }
.pf-edit { margin-left: auto; align-self: flex-start; }
.pf-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; border-top: 1px solid var(--line); padding-top: 20px; }
.pf-of { font-size: 15px; color: var(--muted); font-weight: 500; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 36px; }
.pf-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 18px; }
.pf-open-side { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pf-when { font: 600 15px var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--orange-2); }
.pf-matchup { font: 600 14px var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.pf-matchup .vs, .pf-hist .vs { color: var(--orange); margin: 0 3px; }
.prop-sub svg { width: 13px; height: 13px; vertical-align: -2px; }
.pf-hist .badge svg { width: 13px; height: 13px; }
.pf-hist td:nth-child(2) { white-space: nowrap; }
.pf-card { display: flex; flex-direction: column; gap: 12px; }
.pf-cc {
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(135deg, var(--navy), #0b3d78 60%, #c24a0f 140%); border: 1px solid var(--line-2);
}
.pf-cc b { font: 600 18px var(--font-display); letter-spacing: .1em; }
.pf-cc small { color: var(--muted); font-size: 12px; }
.pf-ledger { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pf-ledger .row-between { align-items: flex-start; }
.pf-ledger-total { border-top: 1px solid var(--line); padding-top: 10px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 16px; }
.pf-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf-board { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s; }
.pf-board:hover { border-color: var(--orange); }
.pf-board small { font: 500 11px var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pf-board b { font: 700 24px/1.1 var(--font-display); color: var(--orange-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lb-layout, .rw-layout, .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .lb-ladder, .rw-aside { position: static; }
  .pf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lb-hero-main { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lb-rank { width: 88px; height: 88px; font-size: 36px; }
  .lb-hero-stats { gap: 20px; }
  .lb-table tr { grid-template-columns: 44px 1fr auto; align-items: center; }
  .lb-table td:last-child { grid-column: 2 / -1; text-align: left; font-size: 13px; }
  .lb-table td:last-child::before { content: 'Projected bonus '; color: var(--faint); }
  .rw-card { grid-template-columns: 1fr; }
  .rw-date { flex-direction: row; gap: 8px; justify-self: start; padding: 8px 12px; }
  .rw-date span { font-size: 18px; margin: 0; }
  .pf-id { flex-direction: column; align-items: flex-start; }
  .pf-edit { margin-left: 0; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-open { grid-template-columns: 1fr; }
  .pf-open-side { text-align: left; align-items: flex-start; }
  .pf-hist td:first-child { grid-column: 1 / -1; }
}