/* V64.32 — UI-kit treatment of existing rankings and achievements.
   Scope excludes gameplay, Home, store, analytics and profile. */
:is(.leaderboard-screen,.achievements-screen) {
  --stats-surface: linear-gradient(145deg,#0b1c36,#040b18);
  --stats-line: #1c426a;
  --stats-muted: #a8c2e3;
  --stats-gold: #ffd044;
  padding-top: 18px;
}
:is(.leaderboard-screen,.achievements-screen) :is(h1,h2,button,strong,b,span,small,p,em) { font-family: var(--spark-font-ui); }
:is(.leaderboard-screen,.achievements-screen) h1 { font-size:30px; line-height:1.08; letter-spacing:-.015em; }
:is(.leaderboard-screen,.achievements-screen) .eyebrow { font-size:11px; color:#84caff; letter-spacing:.14em; }
:is(.leaderboard-screen,.achievements-screen) .muted { color:var(--stats-muted); font-size:13px; line-height:18px; }
.leaderboard-screen .leaderboard-head { align-items:center; }
.leaderboard-screen .leaderboard-head > div { min-width:0; }
.leaderboard-screen .leaderboard-head > span { flex-shrink:0; font-size:11px; letter-spacing:0; padding:8px; border:1px solid #0ca4ce66; background:#06172b; border-radius:12px; }
.leaderboard-screen .leaderboard-copy { margin:10px 0 16px; }
.leaderboard-screen .ranking-tabs { background:#061226; border-color:var(--stats-line); }
.leaderboard-screen .ranking-tabs button { min-height:44px; font-size:13px; letter-spacing:.025em; }
.leaderboard-screen .ranking-tabs button.active { background:linear-gradient(130deg,#8d24db,#3125a4); box-shadow:inset 0 1px #ddb2ff55,0 0 12px #882cda26; }
.leaderboard-screen .weekly-reset { background:var(--stats-surface); border-color:var(--stats-line); grid-template-columns:32px minmax(0,1fr) auto; padding:12px; gap:9px; }
.leaderboard-screen .weekly-reset > span { width:32px; height:38px; font-size:24px; color:var(--stats-gold); }
.leaderboard-screen .weekly-reset b { font-size:14px; letter-spacing:0; }
.leaderboard-screen .weekly-reset small { font-size:12px; line-height:16px; color:var(--stats-muted); }
.leaderboard-screen .weekly-reset > strong { font-size:17px; }
.leaderboard-screen .current-rank { padding:16px 7px; gap:0; border-radius:18px; border-color:#00d7ed70; background:radial-gradient(ellipse at 0 0,#00577755,transparent 70%),var(--stats-surface); }
.leaderboard-screen .current-rank > div { display:flex; flex-direction:column; justify-content:space-between; padding:0 8px; }
.leaderboard-screen .current-rank span { font-size:11px; line-height:14px; letter-spacing:.02em; white-space:normal; overflow:visible; color:var(--stats-muted); }
.leaderboard-screen .current-rank strong { font-size:24px; line-height:29px; font-variant-numeric:tabular-nums; white-space:normal; overflow-wrap:anywhere; }
.leaderboard-screen .current-rank > div:first-child strong { font-size:28px; color:#00e5ff; }
.leaderboard-screen .current-rank > div:last-child strong { color:var(--stats-gold); }
.leaderboard-screen .achievement-button { grid-template-columns:38px minmax(0,1fr) 16px; min-height:76px; border-color:#754acb80; background:linear-gradient(130deg,#231442,#081429); }
.leaderboard-screen .achievement-button-icon { width:38px; height:38px; color:#c081ff; }
.leaderboard-screen .achievement-button b { font-size:15px; letter-spacing:.03em; }
.leaderboard-screen .achievement-button small { font-size:12px; line-height:16px; color:var(--stats-muted); }
.leaderboard-screen .achievement-button > strong { font-size:26px; }
.leaderboard-screen .achievement-button.has-reward { border-color:#00e67688; }
.leaderboard-screen :is(.weekly-goals,.leaderboard-board) { padding:14px; border-radius:18px; background:var(--stats-surface); border-color:var(--stats-line); }
.leaderboard-screen :is(.weekly-goals-head h2,.leaderboard-title h2) { font-size:22px; line-height:26px; }
.leaderboard-screen .weekly-goals-head div > span { font-size:12px; line-height:16px; color:var(--stats-muted); }
.leaderboard-screen .weekly-ready { font-size:11px; letter-spacing:0; padding:7px; }
.leaderboard-screen .weekly-goal { grid-template-columns:32px minmax(0,1fr) 72px; padding:12px 9px; gap:8px; border-color:var(--stats-line); background:#041025; }
.leaderboard-screen .weekly-goal-glyph { width:32px; height:38px; font-size:20px; }
.leaderboard-screen :is(.weekly-goal-copy,.weekly-goal-reward) { overflow-wrap:anywhere; }
.leaderboard-screen .weekly-goal-copy strong { font-size:15px; line-height:18px; letter-spacing:0; }
.leaderboard-screen .weekly-goal-copy span { font-size:12px; line-height:16px; color:var(--stats-muted); }
.leaderboard-screen .weekly-goal-copy small { font-size:11px; color:var(--stats-muted); }
.leaderboard-screen .weekly-goal-progress { height:6px; background:#13233d; }
.leaderboard-screen .weekly-goal-progress i { background:linear-gradient(90deg,#0066ff,#00e5ff); }
.leaderboard-screen .weekly-goal-reward b { font-size:22px; color:var(--stats-gold); }
.leaderboard-screen .weekly-goal-reward > span { font-size:10px; color:var(--stats-muted); letter-spacing:0; }
.leaderboard-screen .weekly-goal-reward em { font-size:10px; line-height:13px; letter-spacing:0; color:var(--stats-muted); }
.leaderboard-screen .weekly-goal-reward button { min-height:44px; width:100%; padding:5px; font-size:12px; border:1px solid #00efb188; background:linear-gradient(130deg,#006e4c,#003f41); color:#a0ffd7; box-shadow:0 0 10px #00e67620; }
.leaderboard-screen .weekly-goal.claimed { opacity:1; background:#071821; }
.leaderboard-screen :is(.weekly-goals-note,.weekly-fairness) { font-size:12px; line-height:17px; color:var(--stats-muted); }
.leaderboard-screen .leaderboard-title { flex-wrap:wrap; gap:5px; }
.leaderboard-screen .leaderboard-title > span { font-size:12px; color:var(--stats-muted); }
.leaderboard-screen .leaderboard-row { min-height:72px; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; }
.leaderboard-screen .rank-mark { font-size:18px; }
.leaderboard-screen .leaderboard-player strong { font-size:17px; }
.leaderboard-screen .leaderboard-player strong em { font-size:10px; }
.leaderboard-screen .leaderboard-player span { font-size:12px; line-height:16px; color:var(--stats-muted); white-space:normal; }
.leaderboard-screen .leaderboard-score { max-width:104px; }
.leaderboard-screen .leaderboard-score strong { font-size:23px; color:var(--stats-gold); overflow-wrap:anywhere; }
.leaderboard-screen .leaderboard-score span { font-size:11px; }
.leaderboard-screen .leaderboard-refresh { min-height:44px; font-size:14px; border-color:var(--stats-line); background:#061226; }
.achievements-screen .achievement-hero { align-items:start; gap:12px; }
.achievements-screen .achievement-shards { min-width:76px; padding:11px 9px; background:#06172b; border-color:#0ca4ce66; }
.achievements-screen .achievement-shards span { font-size:11px; letter-spacing:.02em; }
.achievements-screen .achievement-shards strong { font-size:23px; line-height:26px; }
.achievements-screen .achievement-summary { background:var(--stats-surface); border-color:var(--stats-line); }
.achievements-screen .achievement-summary div { padding:2px 6px; min-width:0; }
.achievements-screen .achievement-summary strong { font-size:26px; font-variant-numeric:tabular-nums; }
.achievements-screen .achievement-summary span { font-size:11px; line-height:15px; color:var(--stats-muted); }
.achievements-screen .achievement-card { background:var(--stats-surface); border-color:var(--stats-line); }
.achievements-screen .achievement-card.locked { opacity:1; }
.achievements-screen .achievement-card.ready { border-color:#00e67688; background:linear-gradient(140deg,#06312b,#061425); }
.achievements-screen .achievement-card-top { grid-template-columns:38px minmax(0,1fr); gap:10px; }
.achievements-screen .achievement-card-icon { width:38px; height:42px; font-size:22px; }
.achievements-screen .achievement-card-copy h2 { font-size:19px; line-height:23px; letter-spacing:0; white-space:normal; overflow:visible; }
.achievements-screen .achievement-card-copy p { font-size:13px; line-height:17px; color:var(--stats-muted); }
.achievements-screen .achievement-reward { grid-column:2; font-size:20px; color:var(--stats-gold); }
.achievements-screen .achievement-progress-head { font-size:12px; letter-spacing:0; color:var(--stats-muted); }
.achievements-screen .achievement-progress { height:7px; background:#15233c; }
.achievements-screen :is(.achievement-claim,.achievement-claimed) { min-height:44px; font-size:13px; letter-spacing:.025em; }
.achievements-screen .achievement-claim:not(:disabled) { background:linear-gradient(130deg,#008856,#004342); color:#b2ffdc; border-color:#00e676aa; }
.achievements-screen .achievement-claim:disabled { color:#8da7c9; opacity:1; }
body:has(:is(.leaderboard-screen,.achievements-screen)) .app-shell { padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
body:has(:is(.leaderboard-screen,.achievements-screen)) .bottom-nav { left:50%; right:auto; width:min(100%,420px); transform:translateX(-50%); min-height:64px; padding:8px 14px calc(9px + env(safe-area-inset-bottom,0px)); border-radius:0; background:#020a16f5; }
body:has(:is(.leaderboard-screen,.achievements-screen)) .bottom-nav button { display:grid; grid-template-rows:25px 16px; align-content:center; justify-items:center; min-height:44px; font-size:12px; line-height:16px; color:#7f9ac9; }
body:has(:is(.leaderboard-screen,.achievements-screen)) .bottom-nav button > span { display:grid; place-items:center; width:25px; height:25px; }
body:has(:is(.leaderboard-screen,.achievements-screen)) .bottom-nav .nav-icon { width:23px; height:23px; fill:currentColor; }
body:has(:is(.leaderboard-screen,.achievements-screen)) .bottom-nav button.active { color:#bb6bff; }
@media(max-width:350px) {
  :is(.leaderboard-screen,.achievements-screen) h1 { font-size:26px; }
  .leaderboard-screen .weekly-goal { grid-template-columns:26px minmax(0,1fr) 63px; padding:10px 7px; gap:6px; }
  .leaderboard-screen .weekly-goal-glyph { width:26px; }
  .leaderboard-screen .current-rank strong { font-size:21px; }
}