/* The public challenge board at /leaderboard. Like blog.css, legal.css and notfound.css it ships
   without the panel script, so everything here has to hold up as plain CSS on server-rendered
   markup. It loads after landing.css and borrows the shell, the .button, the .ghost-link and the
   .eyebrow from there.

   The panel has its own copy of this board in engagement.css and the two are deliberately not
   shared: that one lives inside a signed-in layout with a sidebar beside it, this one is a landing
   page somebody opened from an Instagram bio on a phone. Same numbers, different room. */

.lb { width: min(880px, 100%); margin: 0 auto; padding: 46px 0 72px; }

.lb-hero { text-align: center; }
.lb-hero h1 { margin: 10px 0 0; font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: -.3px; }
.lb-hero .landing-lead { max-width: 620px; margin: 14px auto 0; color: var(--muted); font-size: 13.5px; line-height: 2.1; }

/* The four numbers that answer «is this worth my time» before any name is read. auto-fit rather
   than four fixed columns: on a phone they stack two by two, which keeps the prize on its own
   line beside the deadline instead of shrinking every figure to fit one row. */
.lb-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin-top: 30px;
}
.lb-facts div {
  padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, #1b1734, #141127); text-align: center;
}
.lb-facts span { display: block; color: var(--muted); font-size: 12.5px; }
.lb-facts b { display: block; margin-top: 7px; color: #fff; font-size: 17px; font-weight: 800; }
.lb-facts div:first-child b { color: #ffd479; }

.lb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

/* The challenge video, narrower than the 880px column the rest of the page runs at. At full width a
   16:9 frame is 495px tall and pushes the board itself off the first screen — and the board is what
   somebody following the announcement post came here to read. challenge-promo.css owns everything
   inside it. */
.lb-video { width: min(620px, 100%); margin: 34px auto 0; }
.lb-video p { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }

.lb-board-wrap { margin-top: 40px; }
.lb-board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.lb-board-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.lb-board-head p { margin: 0; color: var(--muted); font-size: 12.5px; }

.lb-board { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.lb-board li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #ffffff05;
}
/* The rank sits in a fixed-width cell so the names line up under each other whether the number is
   one digit, two, or a medal that renders wider than both. */
.lb-rank { flex: 0 0 34px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 700; }
.lb-board li:nth-child(-n+3) .lb-rank { font-size: 21px; }
/* Fixed size and a fixed shape whether the row has a picture or a letter, because the whole column
   is read down the page and one row an odd height is what makes a table look broken. */
.lb-face {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #ffffff0d; object-fit: cover;
  color: #fff; font-size: 16px; font-weight: 700;
}
.lb-board li:nth-child(-n+3) .lb-face { border-color: #ffd47966; }
.lb-board strong { min-width: 0; flex: 1; overflow-wrap: anywhere; color: #efeaff; font-size: 15px; font-weight: 700; }
/* Two figures in one cell: the active count the prize is decided on, and the signups it came out of
   under it in smaller type. Right-aligned as a block so the numbers line up down the column. */
.lb-counts { flex: 0 0 auto; display: grid; justify-items: start; gap: 2px; }
.lb-counts b { color: #8fe4c3; font-size: 14.5px; }
.lb-counts i { color: var(--muted); font-size: 11.5px; font-style: normal; }

/* The winners of a round that has closed. Same row shape as the board underneath it, with the prize
   as a fourth cell in gold: the two lists are read one after the other, and a reader who has just
   learned where the medals sit should not have to learn a second layout to find out what they paid. */
.lb-winners { margin-top: 40px; }
.lb-winners h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.lb-winners ol { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
.lb-winners li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 13px 15px;
  border: 1px solid #ffd47930; border-radius: 12px; background: #ffd4790d;
}
.lb-winners strong { min-width: 0; flex: 1; overflow-wrap: anywhere; color: #efeaff; font-size: 15px; font-weight: 700; }
.lb-winners em { flex: 0 0 auto; color: #f6d78a; font-size: 15px; font-style: normal; font-weight: 800; }

.lb-empty {
  margin: 16px 0 0; padding: 22px 18px; border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--muted); font-size: 13.5px; line-height: 2; text-align: center;
}
.lb-updated { margin: 12px 0 0; color: var(--muted); font-size: 12px; text-align:end; }

.lb-sponsor, .lb-rules, .lb-cta {
  margin-top: 34px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, #1b1734, #141127);
}
.lb-sponsor p { margin: 8px 0 0; color: #d5cdff; font-size: 13.5px; line-height: 2; }
.lb-rules h2, .lb-cta h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.lb-rules ul { margin: 0; padding-inline-start: 20px; color: var(--muted); font-size: 13.5px; line-height: 2.1; }
.lb-rules li + li { margin-top: 7px; }
.lb-cta { text-align: center; }
.lb-cta p { margin: 0 auto; max-width: 560px; color: var(--muted); font-size: 13.5px; line-height: 2.1; }
.lb-cta .lb-actions { margin-top: 18px; }

@media (max-width: 760px) {
  .lb { padding: 30px 0 52px; }
  .lb-actions .button, .lb-actions .ghost-link { width: 100%; text-align: center; }
  .lb-sponsor, .lb-rules, .lb-cta { padding: 17px 16px; }
}