/* ============================================================
   Ranking screen — "Forged Lantern". Loaded after ui-friends.css: it reuses
   .pveHead / .pveTabs / .pveTab (tab row) and .pvpStats .stat (the value chip).
   The leaderboard is still a real <table> (ui/rankings.js; tests read its cells in
   the order portrait | rank | player | value) shown as a stack of cards: every <tr>
   is a flex row and `order` puts the rank first. See docs/subsystems/ranking-ui.md.
   Cursors: never a bare value (CLAUDE.md §4). No backdrop-filter on scrolling
   content (CLAUDE.md §7); the head is a dense fill instead.
   ============================================================ */

/* ---------- sticky head: tabs + "Your X  value  #rank" ---------- */
.rkHead{
  position: sticky; top: calc(76px / var(--ui-zoom, 1)); z-index: 6; display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; padding: 8px 10px; border-radius: 30px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain); background-color: hsl(var(--h) 16% 7% / .985);
}
.rkHead .pveTabs{ margin: 0; align-self: center; border: 0; box-shadow: none; background: none; }
.rkStats{ margin: 0 6px 0 auto; align-self: center; }
.rkStats .stat b{ font-variant-numeric: tabular-nums; }
.stPos{
  font: 700 .8rem var(--f-body); font-style: normal; padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink, #10140f);
}

/* ---------- list ---------- */
.rankingsTable, .rankingsTable tbody{ display: block; width: 100%; max-width: calc(920px / var(--ui-zoom, 1)); margin-inline: auto; }
.rankingsTable thead{ display: none; }
.rankingsTable tbody{ margin-top: 18px; }
.rankingsTable tr{
  display: flex; align-items: center; gap: 14px; min-height: 64px; margin-bottom: 8px; padding: 8px 18px 8px 10px;
  border-radius: 20px; border: 1px solid var(--c-line);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82);
}
.rankingsTable td{ padding: 0; border: 0; text-align: left; }
.rankingsTable td:nth-child(2){ order: 0; flex: none; width: 44px; text-align: center; font: 700 1.05rem var(--f-display); color: var(--c-dim); font-variant-numeric: tabular-nums; }
.rankingsTable td.rankingsPortraitCell{ order: 1; flex: none; width: 44px; height: 44px; }
.rankingsTable td:nth-child(3){ order: 2; flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rankingsTable td:nth-child(4){ order: 3; flex: none; text-align: right; display: flex; flex-direction: column; font: 700 1.15rem var(--f-display); font-variant-numeric: tabular-nums; }
.rankingsTable td:nth-child(4)::after{ content: attr(data-label); color: var(--c-dim); font: 500 .74rem var(--f-body); }
.rankingsTable td:nth-child(4) small{ color: var(--c-dim); font: 500 .74rem var(--f-body); }
.rkName{ font: 700 1.05rem var(--f-display); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; }
.rkTag{ font: 500 .8rem var(--f-body); color: var(--c-dim); }
.rkYou{ font: 700 .68rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #10140f); }
.rankingsPortrait{ width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--c-line); background: hsl(var(--h) 20% 14%); }
.rankingsPortrait .heroPortrait, .rankingsPortrait .heroArtFallback{
  width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 50% 20%;
  display: flex; align-items: center; justify-content: center;
}
.rankingsTable tr.rankingsMe{
  border-color: var(--accent-hi); background-color: hsl(var(--h) 30% 14% / .9); box-shadow: 0 0 0 1px var(--accent-hi) inset, var(--sh-1); font-weight: inherit;
}
/* Gold / silver / bronze medals behind ranks 1-3 */
.rankingsTable tr.rkTop td:nth-child(2){
  width: 36px; height: 36px; margin: 0 4px; display: grid; place-items: center; border-radius: 50%; color: #2a2110;
}
.rankingsTable tr.rkT1 td:nth-child(2){ background: linear-gradient(145deg, #f6dc82, #c99a2e); box-shadow: 0 0 0 1px #f3d57a55; }
.rankingsTable tr.rkT2 td:nth-child(2){ background: linear-gradient(145deg, #eef1f5, #aab1bd); box-shadow: 0 0 0 1px #dfe4ec55; }
.rankingsTable tr.rkT3 td:nth-child(2){ background: linear-gradient(145deg, #e0a06a, #9a5d2b); box-shadow: 0 0 0 1px #e0a06a55; }
#rankingScreen .hint{ margin: 18px auto 0; max-width: calc(920px / var(--ui-zoom, 1)); }

/* ---------- pager ---------- */
.rkPager{ margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 16px; max-width: calc(920px / var(--ui-zoom, 1)); margin-top: 18px; color: var(--c-dim); font: 600 .9rem var(--f-body); }
.rkPager button{ min-width: 110px; min-height: 44px; }

/* ---------- phone ---------- */
@media (max-width: 640px){
  .rkHead{ flex-wrap: wrap; border-radius: 26px; gap: 8px; top: 78px; }
  .rkHead .pveTabs{ width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .rkHead .pveTab{ justify-content: center; padding: 0 6px; }
  .rkStats{ margin: 0 auto 0 4px; }
  .rankingsTable tr{ gap: 10px; padding: 8px 12px 8px 6px; }
  .rankingsTable td:nth-child(2){ width: 34px; }
  .rankingsTable td.rankingsPortraitCell, .rankingsPortrait{ width: 40px; height: 40px; }
  .rkTag{ display: none; }
}