/* ── ATLAS leaderboard ─────────────────────────────────────────────
   The board under Community. Rendered by js/leaderboard.js from
   /api/manage-key?action=leaderboard, which is behind a login, so this
   sheet also owns the signed-out state.

   The figures are the same rendered characters the dashboard and the
   plan cards use, so the sizing rules here are deliberately the same
   shape as .pfig-thumb in pfigure.css: a fixed height, width:auto, and
   the image bottom-aligned so heads of different heights still stand
   on the same floor.

   Number one is larger and everybody below is exactly equal. That is
   the whole visual hierarchy; there is no medal, no glow and no
   colour per rank.                                                   */

.lb-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:22px}
.lb-sub{color:var(--text-dim);font-size:.9rem;margin-top:6px}
/* The line explaining that the characters are deliberately not exact. It sits
   under the board rather than in the header: it answers a question somebody has
   only once they have looked at the figures. */
.lb-foot{margin-top:18px;color:var(--text-dim);font-size:.82rem;line-height:1.6;
  border-top:1px solid var(--border-lt);padding-top:14px}

/* -- the two periods ------------------------------------------------ */
.lb-tabs{display:inline-flex;background:var(--bg-card2);border:1px solid var(--border);
  border-radius:99px;padding:3px}
.lb-tab{appearance:none;border:0;background:transparent;cursor:pointer;
  font:600 .82rem Inter,system-ui,sans-serif;color:var(--text-dim);
  padding:7px 16px;border-radius:99px;transition:color .15s,background .15s}
.lb-tab:hover{color:var(--text)}
.lb-tab[aria-selected=true]{background:var(--bg);color:var(--text);
  box-shadow:var(--shadow)}

/* -- the board ------------------------------------------------------ */
.lb-board{display:flex;flex-direction:column;gap:8px}

.lb-row{display:grid;
  grid-template-columns:44px 120px minmax(0,1fr) repeat(4,minmax(84px,auto));
  align-items:center;gap:18px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 22px}
/* Number one gets height and a slightly stronger edge. Nothing else. */
.lb-row.lb-first{padding:20px 22px;border-color:var(--orange-glow);
  background:var(--bg-card2)}

.lb-rank{font:700 1.05rem JetBrains Mono,monospace;color:var(--text-dim);
  text-align:center}
.lb-first .lb-rank{font-size:1.5rem;color:var(--orange-text)}

/* The figure. Everyone below the top is exactly the same height; only number
   one is taller. The variant adds something in the hand, so the silhouette is
   wider than the dashboard figure and the column is sized for that rather than
   for the body alone. */
.lb-fig{height:96px;display:flex;align-items:flex-end;justify-content:center}
.lb-fig picture{display:contents}
.lb-fig img{display:block;height:96px;width:auto;max-width:none}
.lb-first .lb-fig,.lb-first .lb-fig img{height:140px}

.lb-name{font-weight:650;font-size:.95rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-first .lb-name{font-size:1.15rem}
.lb-name.lb-guest{color:var(--text-dim);font-weight:500}
/* The viewer's own row, so somebody can find themselves without
   counting. Marked on the row, not by recolouring the name. */
.lb-row.lb-me{border-color:var(--orange);}

.lb-stat{text-align:right;line-height:1.25}
.lb-stat b{display:block;font:600 .95rem JetBrains Mono,monospace;color:var(--text)}
.lb-first .lb-stat b{font-size:1.1rem}
.lb-stat span{display:block;font-size:.68rem;color:var(--text-dim);
  letter-spacing:.06em;text-transform:uppercase}

/* -- your own numbers and the two settings -------------------------- */
.lb-you{margin-top:28px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 22px}
.lb-you-title{font-weight:700;margin-bottom:4px}
.lb-you-stats{display:flex;gap:28px;flex-wrap:wrap;margin:14px 0 20px}
.lb-you-stats .lb-stat{text-align:left}
.lb-set{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  border-top:1px solid var(--border-lt);padding-top:18px}
.lb-set label{display:block;font-size:.78rem;color:var(--text-dim);margin-bottom:6px}
.lb-set input[type=text]{background:var(--bg-input);color:var(--text);
  border:1px solid var(--border);border-radius:10px;padding:9px 12px;
  font:500 .9rem Inter,system-ui,sans-serif;min-width:200px}
.lb-set input[type=text]:focus{outline:0;border-color:var(--orange)}
.lb-optout{display:flex;align-items:center;gap:8px;font-size:.85rem;
  color:var(--text-mid);margin-top:16px}
.lb-msg{font-size:.82rem;margin-top:10px;min-height:1.2em;color:var(--text-dim)}
.lb-msg.lb-bad{color:#ef4444}

/* -- empty, loading and signed out ---------------------------------- */
.lb-note{background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px 24px;text-align:center;
  color:var(--text-dim)}
.lb-note b{display:block;color:var(--text);margin-bottom:6px}

/* -- narrow screens -------------------------------------------------
   Games and the average go first: points and rounds are what the order
   is made of, so those two stay to the end. The table never scrolls
   sideways; it drops columns instead. */
@media (max-width:1100px){
  .lb-row{grid-template-columns:38px 96px minmax(0,1fr) repeat(3,minmax(74px,auto));
    gap:12px;padding:10px 16px}
  .lb-fig,.lb-fig img{height:80px}
  .lb-first .lb-fig,.lb-first .lb-fig img{height:112px}
  .lb-col-avg{display:none}
}
@media (max-width:820px){
  .lb-row{grid-template-columns:32px 76px minmax(0,1fr) repeat(2,minmax(66px,auto));
    gap:10px;padding:9px 14px}
  .lb-fig,.lb-fig img{height:64px}
  .lb-first .lb-fig,.lb-first .lb-fig img{height:92px}
  .lb-col-games{display:none}
}
@media (max-width:560px){
  .lb-row{grid-template-columns:28px 58px minmax(0,1fr) minmax(66px,auto);gap:8px}
  .lb-fig,.lb-fig img{height:52px}
  .lb-first .lb-fig,.lb-first .lb-fig img{height:76px}
  .lb-col-rounds{display:none}
  .lb-set input[type=text]{min-width:0;width:100%}
}
/* The top three move (2026-09-11). The section carries the same dotted
   world the hero has, so the chair has something to stand on; the rows
   build up with the site's fade-up; the first row gets room for a figure
   that is wider than a walking one. No medal, no glow, no colour per place. */
.lb-section{position:relative;overflow:hidden}
.lb-section>.container{position:relative;z-index:1}
.lb-worldmap{position:absolute;left:50%;top:-60px;transform:translateX(-50%);width:min(1240px,96vw);height:620px;pointer-events:none;background-color:var(--orange);opacity:.10;-webkit-mask-image:url(/img/world-dots.svg);mask-image:url(/img/world-dots.svg);mask-repeat:no-repeat;mask-position:center top;mask-size:100% auto;z-index:0}
.lb-first{padding-top:22px;padding-bottom:22px}
.lb-first .lb-fig{overflow:visible}
/* A sitting figure with a chair under it is wider than a walking one, so the
   first row's figure column grows on desktop; the name column takes the loss. */
@media (min-width:1101px){.lb-row.lb-first{grid-template-columns:44px 200px minmax(0,1fr) repeat(4,minmax(84px,auto))}}
@media (prefers-reduced-motion:reduce){.lb-row.fade-up{opacity:1;transform:none;transition:none}}