/* /leaderboard (functions/_leaderboard.js). Uses the site tokens, so day, night and CRT follow on their own.
   Motion: the tab glide, the podium rising and a small pixel confetti. None of it runs with reduced motion. */
.lb{max-width:960px;margin:0 auto;padding:34px 20px 56px}
.lb-head h1{font-size:44px;line-height:1.05;margin:0 0 6px}
.lb-head p{color:var(--mute);margin:0;max-width:640px}
.lb-head .lb-stripe{display:block;width:120px;height:6px;margin:14px 0 0;background:var(--stripes,linear-gradient(90deg,#4fb06a 0 16.66%,#f3c63f 16.66% 33.33%,#f08a2c 33.33% 50%,#e8483f 50% 66.66%,#8a5bb8 66.66% 83.33%,#3e8fd6 83.33%));border-radius:3px}

/* Board tabs: one stripe colour each. */
.lb .lb-boards{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 14px;padding:0;list-style:none}
.lb .lb-boards li{display:flex;margin:0;padding:0}
.lb .lb-boards a{--k:var(--ink);display:inline-flex;margin:0;white-space:nowrap;align-items:center;gap:7px;padding:7px 13px 7px 9px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:14px;box-shadow:0 2px 0 var(--ink);transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,background .18s}
.lb-boards a:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--ink)}
.lb-boards a:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}
.lb-boards a i{width:18px;height:18px;border-radius:50%;background:var(--k);border:1px solid var(--ink);display:grid;place-items:center;flex:none}
.lb-boards a i svg{width:10px;height:10px;fill:#fff}
.lb-boards a[aria-current=page]{background:var(--k);color:#fff;font-weight:600}
.lb-boards a[aria-current=page] i{background:#fff}
.lb-boards a[aria-current=page] i svg{fill:var(--k)}
.lb-k0{--k:#3f9d5a!important}.lb-k1{--k:#c99a12!important}.lb-k2{--k:#e07a1f!important}.lb-k3{--k:#e0453c!important}.lb-k4{--k:#8a5bb8!important}.lb-k5{--k:#3e8fd6!important}.lb-k6{--k:#1d1b17!important}
:root[data-theme=night] .lb-k6{--k:#6b6150!important}

/* Period tabs: a sliding pill. */
.lb-periods{position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);padding:3px;border:1px solid var(--ink);border-radius:10px;background:var(--box);margin:0 0 18px}
.lb-periods button{position:relative;z-index:1;appearance:none;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;padding:6px 16px;border-radius:7px;cursor:pointer;white-space:nowrap}
.lb-periods button[aria-selected=true]{font-weight:600}
.lb-periods .lb-glide{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:7px;background:var(--paper);box-shadow:var(--bevel),0 0 0 1px var(--ink);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.lb-periods[data-on="1"] .lb-glide{transform:translateX(100%)}
.lb-periods[data-on="2"] .lb-glide{transform:translateX(200%)}
/* Arabic: the tabs run right to left, so the pill slides the other way (make-rtl.mjs mirrors left and right, not transforms). */
html[dir=rtl] .lb-periods[data-on="1"] .lb-glide{transform:translateX(-100%)}
html[dir=rtl] .lb-periods[data-on="2"] .lb-glide{transform:translateX(-200%)}

/* The window. */
.lb-win{border:1px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:0 2px 0 var(--ink);overflow:hidden}
.lb-tb{display:flex;align-items:center;gap:10px;height:26px;padding:0 10px;border-bottom:1px solid var(--ink);background:repeating-linear-gradient(180deg,var(--ink) 0 1px,transparent 1px 3px) center/100% 11px no-repeat,var(--paper)}
.lb-tb i{width:12px;height:12px;border:1px solid var(--ink);background:var(--paper);flex:none}
.lb-tb span{margin:0 auto;padding:0 10px;background:var(--paper);font:11px var(--pixel,monospace);letter-spacing:.06em;text-transform:uppercase}
.lb-panel{padding:22px 22px 18px}
.lb-panel[hidden]{display:none}
.lb-panel.lb-in{animation:lbIn .42s cubic-bezier(.22,1,.36,1)}
@keyframes lbIn{from{transform:translateY(8px)}to{transform:none}}
.lb-what{margin:0;padding:14px 22px 0;color:var(--mute);font-size:14px}

/* The podium: 2nd, 1st, 3rd. */
.lb-pod{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:14px;max-width:620px;margin:6px auto 22px;padding:0;list-style:none}
.lb-pod li{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.lb-pod .lb-who{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:100%;margin-bottom:10px}
.lb-pod .lb-av{width:64px;height:64px;font-size:26px}
.lb-pod .p1 .lb-av{width:82px;height:82px;font-size:32px}
.lb-pod .lb-nm{font-family:var(--serif);font-size:19px;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-pod .lb-n{font:600 15px var(--sans);color:var(--ink)}
.lb-pod .lb-n small{font-weight:400;color:var(--mute)}
.lb-step{position:relative;width:100%;border:1px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;background:var(--box);box-shadow:var(--bevel);display:grid;place-items:start center;padding-top:10px;transform-origin:bottom;animation:lbRise .6s cubic-bezier(.34,1.56,.64,1) both}
.p1 .lb-step{height:118px;background:linear-gradient(180deg,#f6d860,#e9b92a);animation-delay:.12s}
.p2 .lb-step{height:84px;background:linear-gradient(180deg,#e7e7e2,#c3c3bb)}
.p3 .lb-step{height:62px;background:linear-gradient(180deg,#e8b07c,#c9824a);animation-delay:.22s}
:root[data-theme=crt] .lb-step{background:var(--box)!important}
:root[data-theme=crt] .lb-bar i,:root[data-theme=crt] .lb-floor,:root[data-theme=crt] .lb-stripe{background:var(--ink)!important}
:root[data-theme=crt] .lb-fx b{background:var(--ink)!important}
:root[data-theme=crt] .lb-medal{filter:grayscale(1) sepia(1) hue-rotate(80deg) saturate(3)}
:root[data-theme=crt] .lb-boards a[aria-current=page]{background:var(--ink);color:var(--paper)}
@keyframes lbRise{from{transform:scaleY(.15)}to{transform:none}}
.lb-floor{grid-column:1/-1;height:6px;margin-top:-14px;border-top:1px solid var(--ink);background:var(--stripes,linear-gradient(90deg,#4fb06a 0 16.66%,#f3c63f 16.66% 33.33%,#f08a2c 33.33% 50%,#e8483f 50% 66.66%,#8a5bb8 66.66% 83.33%,#3e8fd6 83.33%))}
.lb-medal{width:34px;height:34px;display:block}
.lb-medal circle{stroke:var(--ink)}
.lb-medal text{font:700 13px var(--sans);fill:var(--ink)}
.p1 .lb-medal{width:40px;height:40px;animation:lbBob 2.6s ease-in-out .8s infinite}
@keyframes lbBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-6deg)}}

/* Confetti: pixel squares from the winner, once per showing. */
.lb-fx{position:absolute;left:50%;top:0;width:0;height:0;pointer-events:none}
.lb-fx b{position:absolute;width:6px;height:6px;opacity:0;animation:lbPop 1.1s cubic-bezier(.22,1,.36,1) .35s forwards}
.lb-fx b:nth-child(6n+1){background:#4fb06a}.lb-fx b:nth-child(6n+2){background:#f3c63f}.lb-fx b:nth-child(6n+3){background:#f08a2c}.lb-fx b:nth-child(6n+4){background:#e8483f}.lb-fx b:nth-child(6n+5){background:#8a5bb8}.lb-fx b:nth-child(6n){background:#3e8fd6}
@keyframes lbPop{0%{opacity:1;transform:translate(0,30px) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}

/* The rest of the list. */
.lb-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lb-list li{display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--line);animation:lbRow .4s cubic-bezier(.22,1,.36,1) both}
.lb-list li:nth-child(2){animation-delay:.04s}.lb-list li:nth-child(3){animation-delay:.08s}.lb-list li:nth-child(4){animation-delay:.12s}.lb-list li:nth-child(5){animation-delay:.16s}.lb-list li:nth-child(n+6){animation-delay:.2s}
@keyframes lbRow{from{transform:translateX(-8px)}to{transform:none}}
.lb-list li.lb-me{background:var(--box);border-radius:6px}
.lb-rk{font:13px var(--pixel,monospace);color:var(--mute);text-align:right}
.lb-list .lb-av{width:36px;height:36px;font-size:15px}
.lb-mid{display:flex;flex-direction:column;gap:4px;min-width:0}
.lb-line{display:flex;align-items:center;gap:7px;min-width:0}
.lb-list .lb-nm{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-bar{display:block;height:5px;border-radius:3px;background:var(--box);overflow:hidden}
.lb-bar i{display:block;height:100%;width:var(--w);border-radius:3px;background:var(--stripes,linear-gradient(90deg,#4fb06a,#f3c63f,#f08a2c,#e8483f,#8a5bb8,#3e8fd6));background-size:max(100%,320px) 100%;transform-origin:left;animation:lbBar .7s cubic-bezier(.22,1,.36,1) .15s both}
@keyframes lbBar{from{transform:scaleX(0)}to{transform:none}}
.lb-list .lb-n{font:600 15px var(--sans);text-align:right;white-space:nowrap}
.lb-list .lb-n small{font-weight:400;color:var(--mute);font-size:12px}

/* Faces and names. */
.lb-av{--h:#f3c63f;position:relative;display:grid;place-items:center;border-radius:50%;border:1px solid var(--ink);background:var(--h);color:#1d1b17;font-family:var(--serif);overflow:hidden;flex:none}
.lb-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lb-av[data-c="0"]{--h:#8fd19e}.lb-av[data-c="1"]{--h:#f3d36b}.lb-av[data-c="2"]{--h:#f5ad6b}.lb-av[data-c="3"]{--h:#f08c84}.lb-av[data-c="4"]{--h:#c2a3e0}.lb-av[data-c="5"]{--h:#8dbdea}
:root[data-theme=crt] .lb-av{--h:var(--box)!important;color:var(--ink)}
.lb-nm{color:var(--ink);text-decoration:none}
a.lb-nm:hover{text-decoration:underline;text-underline-offset:3px}
.lb-you{font:10px var(--pixel,monospace);padding:1px 5px;border:1px solid var(--ink);border-radius:4px;background:var(--paper)}


/* This month's prize (PRIZE in functions/_leaderboard.js, off by default). */
.lb-prize{display:flex;gap:14px;align-items:flex-start;margin:22px 0 0;padding:14px 18px;border:1px solid var(--ink);border-radius:8px;background:linear-gradient(135deg,rgba(243,198,63,.28),rgba(243,198,63,.08)),var(--paper);box-shadow:0 2px 0 var(--ink)}
.lb-trophy{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.lb-trophy svg{width:26px;height:26px}
.lb-prize h2{font-size:22px;margin:0 0 2px}
.lb-prize p{margin:0;font-size:15px}
.lb-prize a{color:var(--ink)}
.lb-prize ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--mute)}
.lb-prize li+li{margin-top:2px}
:root[data-theme=crt] .lb-prize{background:var(--paper)}
:root[data-theme=crt] .lb-trophy path[fill="#f3c63f"]{fill:var(--ink)}

/* Nothing yet. */
.lb-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 10px 30px}
.lb-empty svg{width:60px;height:54px}
.lb-empty h3{font-size:22px;margin:4px 0 0}
.lb-empty p{color:var(--mute);margin:0;max-width:420px}
.lb-empty .btn{margin-top:6px}

/* How it counts. */
.lb-rules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.lb-rules .lb-win{box-shadow:0 2px 0 var(--ink)}
.lb-rules ul{margin:0;padding:14px 18px 16px 34px;font-size:14px;line-height:1.55}
.lb-rules li+li{margin-top:4px}
.lb-mine{margin:14px 0 0;font-size:14px;color:var(--mute)}
.lb-mine a{color:var(--ink)}

@media (max-width:640px){
  .lb{padding:22px 16px 40px}
  .lb-head h1{font-size:34px}
  .lb .lb-boards{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:16px -16px 8px;padding:4px 16px 8px;scrollbar-width:none}
  .lb-boards li{flex:none}
  .lb-boards::-webkit-scrollbar{display:none}
  .lb-boards a{flex:none}
  .lb-periods{display:grid;width:100%}
  .lb-periods button{padding:6px 6px}
  .lb-panel{padding:16px 12px 12px}
  .lb-what{padding:12px 12px 0}
  .lb-pod{gap:8px}
  .lb-pod .lb-av{width:50px;height:50px;font-size:20px}
  .lb-pod .p1 .lb-av{width:62px;height:62px;font-size:24px}
  .lb-pod .lb-nm{font-size:16px}
  .lb-pod .lb-n{font-size:13px}
  .lb-pod .lb-who .lvc{display:none}
  .p1 .lb-step{height:92px}.p2 .lb-step{height:66px}.p3 .lb-step{height:48px}
  .lb-list li{grid-template-columns:24px 34px minmax(0,1fr) auto;gap:9px;padding:8px 2px}
  .lb-list .lb-av{width:32px;height:32px}
  .lb-rules{grid-template-columns:1fr}
  .lb-prize{gap:10px;padding:12px 14px}
  .lb-trophy{width:34px;height:34px}
  .lb-trophy svg{width:20px;height:20px}
  .lb-prize h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .lb-panel.lb-in,.lb-step,.lb-list li,.lb-bar i,.p1 .lb-medal{animation:none!important}
  .lb-fx{display:none}
  .lb-periods .lb-glide,.lb-boards a{transition:none}
}