/* The world leaderboard on the site's tokens (/site.css): a podium for the top three (second, first, third, each card on its
   step) and row cards for fourth to tenth. Thumbnails are game art, so they keep the forest backdrop in both themes. */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "second first third"; align-items: end; gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.podium:empty { display: none; }
.podium > li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.podium > .place-1 { grid-area: first; }
.podium > .place-2 { grid-area: second; }
.podium > .place-3 { grid-area: third; }
.podium-card, .row-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; }
.podium-card:hover, .row-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.podium-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.place-1 .podium-card { border-color: #f4bd32; }
.world-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #173a33; }
.world-thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.world-text { min-width: 0; padding: 0 4px; }
.world-name { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.world-name strong { font-weight: 500; }
.trophy { flex: none; width: 24px; height: 24px; shape-rendering: crispEdges; }
.podium-step { display: grid; place-items: center; border: 1px solid var(--line); border-top-width: 4px; border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface-2); font: 600 32px/1 var(--font-mono); color: var(--ink-muted); }
.place-1 .podium-step { height: 120px; border-top-color: #f4bd32; }
.place-2 .podium-step { height: 84px; border-top-color: #b9c1cd; }
.place-3 .podium-step { height: 56px; border-top-color: #c87a3e; }
.runners-up { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.row-card { display: grid; grid-template-columns: 40px 112px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 16px 8px 8px; }
.row-card .world-thumb { border-radius: 6px; }
.world-rank { font: 13px/1 var(--font-mono); color: var(--ink-muted); text-align: center; }
@media (max-width: 640px) {
  .podium { grid-template-columns: minmax(0, 1fr); grid-template-areas: "first" "second" "third"; }
  .podium-step { display: none; }
  .row-card { grid-template-columns: 28px 80px minmax(0, 1fr); gap: 12px; }
}