/* ============================================================
   The games page's hall of fame (#hall-of-fame, gallery.go renderFame,
   js/game-scores.js): the most wins over every game, the top three on a
   podium and the rest of the top ten beside it, and each game's champion
   crowned on its card (.gcard-champ). Gold, silver and bronze carry dark
   figures, so they read at AA.
   ============================================================ */
.gfame{padding:80px 0 0}
.gfame .fsection-head{margin-bottom:34px;max-width:760px}
.gfame .fsection-head h2{line-height:1.06}
.gfame-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:rgba(220,171,60,.16);color:#6b4f10;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gfame-kicker i{color:#c9962c}
.glass-tile.gfame-tile{padding:30px 34px 26px;overflow:hidden;background:linear-gradient(180deg,rgba(255,248,224,.78),rgba(255,255,255,.55) 55%)}
.gfame-glow{position:absolute;width:640px;height:640px;left:50%;top:-430px;margin-left:-320px;border-radius:50%;background:radial-gradient(circle,rgba(226,178,64,.32),transparent 62%);filter:blur(50px);pointer-events:none;z-index:-1}

.gfame-tabs{display:flex;width:max-content;max-width:100%;margin:0 auto 26px;padding:3px;border-radius:999px;background:var(--w-inset)}
.gfame-tab{padding:6px 14px;border:none;border-radius:999px;background:transparent;color:var(--w-mut);font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer}
.gfame-tab[aria-pressed="true"]{background:var(--site-card,#fff);color:var(--w-ink);box-shadow:0 1px 3px rgba(31,35,33,.12)}
.gfame-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}

.gfame-board{display:grid;grid-template-columns:minmax(0,1fr);gap:26px 40px;align-items:end}
@media (min-width:860px){.gfame-board--list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.gfame-msg{padding:40px 8px;text-align:center;font-size:15px;color:var(--w-mut)}
.gfame-note{margin:24px 0 0;text-align:center;font-size:13px;color:var(--w-mut)}

/* The players, on the podium and in the list */
.gfame-player{display:flex;align-items:center;min-width:0;max-width:100%;color:var(--w-ink);text-decoration:none}
a.gfame-player:hover .gfame-name{text-decoration:underline;text-underline-offset:2px}
.gfame-avatar{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:var(--green-400);color:#fff;font-weight:700}
.gfame-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gfame-name{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.gfame-count{display:flex;flex-direction:column;min-width:0;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
.gfame-wins{font-weight:700;color:var(--w-ink)}
.gfame-games{font-size:12px;color:var(--w-mut2)}

/* The podium: second, first, third */
.gfame-podium{list-style:none;margin:0 auto;padding:0;width:100%;max-width:500px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.gfame-place{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.gfame-place1{order:2}
.gfame-place2{order:1}
.gfame-place3{order:3}
.gfame-crown{font-size:28px;color:#d9a83a;margin-bottom:8px;filter:drop-shadow(0 3px 6px rgba(201,150,44,.4))}
.gfame-place .gfame-player{flex-direction:column;gap:9px}
.gfame-place .gfame-avatar{width:58px;height:58px;border-radius:17px;font-size:21px;box-shadow:0 0 0 3px #fffdf4,0 0 0 6px var(--gfame-metal),0 10px 22px rgba(31,35,33,.14)}
.gfame-place1 .gfame-avatar{width:76px;height:76px;border-radius:22px;font-size:28px}
.gfame-place .gfame-name{font-size:15px}
.gfame-place .gfame-count{align-items:center;margin:3px 0 12px}
.gfame-place .gfame-wins{font-size:14px}
.gfame-step{display:flex;justify-content:center;width:100%;padding-top:10px;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,var(--gfame-metal-hi),var(--gfame-metal));color:var(--gfame-ink);font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.gfame-place1{--gfame-metal:#dcab3c;--gfame-metal-hi:#f8dc8a;--gfame-ink:#4d3606}
.gfame-place2{--gfame-metal:#bcc2cb;--gfame-metal-hi:#eef0f3;--gfame-ink:#2f343c}
.gfame-place3{--gfame-metal:#d4925f;--gfame-metal-hi:#f4cdaa;--gfame-ink:#4a250c}
.gfame-place--open .gfame-step{opacity:.4}
.gfame-place1 .gfame-step{height:112px;font-size:38px}
.gfame-place2 .gfame-step{height:80px}
.gfame-place3 .gfame-step{height:60px}

/* Fourth to tenth */
.gfame-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gfame-row{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 10px;border-radius:12px;background:rgba(255,255,255,.62);box-shadow:0 1px 2px rgba(31,35,33,.05)}
.gfame-rank{flex-shrink:0;width:24px;text-align:center;font-weight:700;color:var(--w-mut)}
.gfame-row .gfame-player{flex:1;gap:10px}
.gfame-row .gfame-avatar{width:30px;height:30px;border-radius:9px;font-size:12px}
.gfame-row .gfame-name{font-size:14.5px;font-weight:600}
.gfame-row .gfame-count{flex-shrink:1;max-width:48%;align-items:flex-end;text-align:right}
.gfame-row .gfame-wins{font-size:14px}
.gfame-row .gfame-games{font-size:11.5px}

@media (max-width:560px){
  .gfame{padding-top:60px}
  .glass-tile.gfame-tile{padding:24px 16px 20px}
  .gfame-podium{gap:8px}
  .gfame-place .gfame-avatar{width:46px;height:46px;border-radius:14px;font-size:17px}
  .gfame-place1 .gfame-avatar{width:60px;height:60px;border-radius:18px;font-size:22px}
  .gfame-place .gfame-name{font-size:13.5px}
  .gfame-place .gfame-wins{font-size:13px}
  .gfame-games{font-size:11.5px}
  .gfame-crown{font-size:24px}
  .gfame-place1 .gfame-step{height:92px;font-size:32px}
  .gfame-place2 .gfame-step{height:66px;font-size:26px}
  .gfame-place3 .gfame-step{height:50px;font-size:26px}
  .gfame-row{gap:10px;padding:8px 10px 8px 6px}
}
/* On the narrowest phones the counts go under the name, so the name keeps
   the row's width */
@media (max-width:400px){
  .gfame-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 10px}
  .gfame-rank{grid-row:1 / 3}
  .gfame-row .gfame-count{max-width:none;align-items:flex-start;margin-left:40px;text-align:left}
}

/* A game's champion on its card (filled in by js/game-scores.js). The card's
   text column may shrink below a long @username, which then ellipsizes. */
.gcard .gcard-text{min-width:0}
.gcard-champ{display:flex;align-items:center;gap:7px;width:fit-content;max-width:100%;margin-top:10px;padding:4px 10px;border-radius:8px;background:rgba(220,171,60,.15);color:#6b4f10;font-size:12.5px;font-weight:600;line-height:1.4}
.gcard-champ[hidden]{display:none}
.gcard-champ i{flex-shrink:0;font-size:11px;color:#c9962c}
.gcard-champ-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gcard-champ-wins{flex-shrink:0;font-weight:500}
.gcard-champ-wins::before{content:'·';margin-right:7px}
.gcard-champ-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}