/* Cade · Leaderboard. Loads after /ds/ds.css and /lib/motion.css.
   A 1:1 port of the handoff's LeaderboardArcadeBoard.module.css (frontend-v1/apps/web/app/leaderboard/components),
   the values kept as theirs, with production tokens (page #0E0D0C, raised #161514, paper #EFE9D8,
   ink #0B0B0B) and production type: their --font-display is Futura PT Cond (as cade.market ships it),
   JetBrains Mono for the labels and the numbers. Ours where the house rules ask: square corners,
   the orange focus ring, hit areas of 44px. */

/* ── page chrome (as /profile): sticky header, transparent until scroll, the footer band ── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.lbp{margin:0;overflow-x:hidden;background:var(--page,#0E0D0C);color:var(--paper,#EFE9D8)}
#hnav{position:sticky;top:0;z-index:70}
.hnav .cnl-d{transition:background-color .25s}
.hnav.stuck .cnl-d{background:rgba(11,11,11,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hnav.stuck .cnl-m{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hfoot svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
#footM{display:none}
.hfoot{background:#101010;margin-top:64px}#footD{max-width:1440px}
@media (max-width:1023px){#footD{display:none}#footM{display:block;max-width:600px}}

.lbp{--lb-cond:"Futura PT Cond","Arial Narrow",Impact,sans-serif;--lb-mono:"JetBrains Mono",ui-monospace,monospace;
  --lb-paper:#EFE9D8;--lb-ink:#0B0B0B;--lb-meta:#B8B3A7;--lb-card:#242424;--lb-raised:#161514}
.lbp a{color:inherit;text-decoration:none}
.lbp p{margin:0}

/* the display face: Futura PT Cond Medium Oblique, never a synthetic bold */
.lb-h1,.lb-sh h2,.lb-pill,.lb-step,.lb-day,.pod-num,.pod-name,.pod-profit,.tc-title,.tc-val,.rk-rank,.rk-name,.rk-pnl{
  font-family:var(--lb-cond);font-weight:500;font-style:oblique;font-synthesis:none}
.lb-mono{font-family:var(--lb-mono)}

/* ── board ── */
.lb-board{position:relative;padding:clamp(24px,4vw,48px) clamp(16px,4vw,48px) 56px;color:var(--lb-paper)}
.lb-content{width:min(100%,1120px);margin:0 auto}

/* ── masthead ── */
.lb-mast{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.lb-titlelock{position:relative;display:inline-block;max-width:100%}
.lb-h1{margin:0;font-size:clamp(38px,6vw,84px);line-height:.85;text-transform:uppercase;letter-spacing:0;color:var(--lb-paper);
  text-shadow:3px 3px 0 #000;-webkit-text-stroke:1px #000;paint-order:stroke fill}
.lb-ctrls{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lb-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.lb-pill{position:relative;transform:skewX(-8deg);border:3px solid #000;border-radius:0;padding:8px 16px;font-size:15px;line-height:1;text-transform:uppercase;
  background:var(--lb-card);color:rgb(255 255 255/.6);box-shadow:4px 4px 0 #000;cursor:pointer;transition:transform 150ms}
.lb-pill>span{display:inline-block;transform:skewX(8deg)}
.lb-pill[aria-selected="true"]{background:#6330D3;color:#fff}
.lb-pill::after,.lb-step::after{content:"";position:absolute;inset:-4px}
.lb-stepwrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lb-stepper{display:flex;align-items:center;gap:8px;color-scheme:dark}
.lb-step{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:none;border:3px solid #000;background:var(--lb-card);color:var(--lb-paper);
  font-size:18px;line-height:1;box-shadow:3px 3px 0 #000;cursor:pointer;transition:transform 150ms;padding:0}
.lb-step:disabled{cursor:not-allowed;opacity:.4}
.lb-day{position:relative;display:flex;min-width:132px;min-height:38px;box-sizing:border-box;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:3px solid #000;background:#161616;padding:6px 12px;box-shadow:3px 3px 0 #000;transition:transform 150ms}
.lb-day svg{width:16px;height:16px;flex:none;color:#91BB4F}
.lb-day b{font-weight:500;font-size:16px;line-height:1;text-transform:uppercase;color:var(--lb-paper)}
.lb-day input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;color-scheme:dark;border:0;padding:0;margin:0}
.lb-day:focus-within{outline:3px solid #FFA800;outline-offset:3px}

/* ── podium ── */
.lb-podium{position:relative;margin-top:34px}
.lb-stack{position:relative;display:grid;grid-template-areas:"second first third";grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);align-items:end;gap:16px;width:100%}
.pod{position:relative;display:flex;min-width:0;min-height:220px;flex-direction:column;background:transparent;box-shadow:6px 6px 0 #000;color:var(--lb-ink);text-align:left;transition:transform 160ms ease}
.pod::before,.pod::after{position:absolute;inset:0;pointer-events:none;content:""}
.pod::before{inset:-3px;z-index:0;background:#000;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.pod::after{z-index:0;background:#161616;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.pod[data-rank="1"]{grid-area:first;min-height:270px;isolation:isolate}
.pod[data-rank="2"]{grid-area:second}
.pod[data-rank="3"]{grid-area:third}
.pod[data-rank="1"]::after{background:#FAF424}
.pod[data-rank="2"]::after{background:#B991FF}
.pod[data-rank="3"]::after{background:#FFA800}
.pod-c{position:relative;z-index:1;display:flex;min-width:0;min-height:100%;flex:1;flex-direction:column;padding:18px 18px 0;isolation:isolate}
.pod-c>:not(.pod-fade){position:relative;z-index:1}
.pod-lock{display:flex;min-width:0;align-items:baseline;gap:10px;margin-bottom:18px;padding-right:68px;border-bottom:3px solid var(--lb-ink);padding-bottom:10px}
.pod-num{flex:0 0 auto;color:var(--lb-ink);font-size:58px;line-height:.8}
.pod[data-rank="1"] .pod-num{font-size:74px}
.pod-lbl{min-width:0;color:var(--lb-ink);font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.pod-trophy{width:40px;height:40px;margin-left:auto;flex:0 0 auto;align-self:center}
.pod-main{display:flex;min-width:0;flex-direction:column;gap:10px;padding-bottom:12px}
.pod-id{display:inline-flex;width:100%;min-width:0;align-items:center;gap:12px;color:var(--lb-ink)}
.pod-name{flex:1 1 auto;min-width:0;padding-inline-end:.14em;white-space:nowrap;font-size:30px;line-height:.96;text-transform:uppercase}
.pod[data-rank="1"] .pod-name{font-size:34px}
.pod-pb{display:flex;min-width:0;flex-direction:column;gap:4px}
.pod-plbl{color:var(--lb-ink);font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.pod-profit{max-width:100%;color:var(--lb-ink);font-size:38px;line-height:.92;font-variant-numeric:tabular-nums;white-space:nowrap}
.pod[data-rank="1"] .pod-profit{font-size:48px}
.pod-profit[data-state="positive"]{color:#175C33}
.pod-profit[data-state="negative"]{color:#8F1926}
.pod-rule{margin:auto -18px 0;padding:12px 8px 14px;border-top:3px solid var(--lb-ink);background:var(--lb-paper);color:#000}
.pod-stats{display:grid;grid-template-columns:minmax(0,42.5fr) minmax(0,32fr) minmax(0,25.5fr);gap:0;min-width:0}
.pod-stat{min-width:0;padding:0 8px;border-left:1px solid #000}
.pod-stat:first-child{border-left:0}
.pod-slbl{display:block;color:#000;font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1.1;white-space:nowrap;text-transform:uppercase;opacity:.62}
.pod-sval{display:block;margin-top:4px;color:#000;font-family:var(--lb-mono);font-size:14px;font-weight:800;line-height:1;white-space:nowrap}
.pod-fade{position:absolute;top:14px;right:12px;z-index:0;width:64px;height:45.35px;pointer-events:none;background:url(assets/halftone-fade1.svg) center/100% 100% no-repeat;
  filter:grayscale(1) brightness(.55);opacity:.45;transform:rotate(180deg)}

/* their identicon (ActorAvatar.tsx), square, no soft glow */
.ava{position:relative;display:inline-flex;flex:none;overflow:hidden;border:1px solid var(--ava-b,#343434);background:#0B0B0B}
.ava svg{display:block;width:100%;height:100%}

/* ── section headings: ArcadeSectionHeading (artwork node 2004:6457) ── */
.lb-titles,.lb-boardsec{margin-top:34px}
.lb-strow{display:flex;align-items:center;gap:14px}
.lb-sh{position:relative;isolation:isolate;aspect-ratio:339/69;width:100%;max-width:339px;container-type:inline-size}
.lb-sh svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lb-sh .sh-s{fill:#0B0B0B;stroke:#0B0B0B;stroke-width:2;stroke-miterlimit:10}
.lb-sh .sh-f{fill:#FAF424}
.lb-sh .sh-k{fill:none;stroke:#0B0B0B;stroke-width:2;stroke-miterlimit:10}
.lb-sh h2{position:absolute;left:6%;right:6%;top:50%;z-index:1;margin:0;transform:translateY(-56%);white-space:nowrap;text-align:center;
  font-size:clamp(20px,10.4cqw,36px);line-height:1;text-transform:uppercase;letter-spacing:0;color:#0B0B0B}
.lb-sdate{color:var(--lb-meta);font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* ── daily titles ── */
.lb-tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.tc{display:flex;min-width:0;align-items:stretch;gap:16px;padding:14px 16px;border:3px solid #000;background:var(--lb-card);box-shadow:6px 6px 0 #000;transition:border-color 150ms ease,background-color 150ms ease}
a.tc:hover{border-color:#FAF424;background:#2B2B2B}
.tc-copy{min-width:0;flex:1}
.tc-eyb,.tc-slbl{font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.tc-title{margin:5px 0 0;color:var(--lb-paper);font-size:24px;line-height:1;text-transform:uppercase}
.tc-id{margin-top:6px;overflow-wrap:anywhere;color:var(--lb-meta);font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.1;text-transform:uppercase}
.tc-stat{display:flex;min-width:100px;flex-direction:column;justify-content:center;border-left:1px solid rgb(240 234 217/.25);padding-left:16px;text-align:right}
.tc-slbl{color:var(--lb-meta)}
.tc-val{margin-top:5px;color:var(--lb-paper);font-size:30px;line-height:.9;white-space:nowrap}

/* ── the board ── */
.lb-table{min-width:0;margin-top:28px}
.lb-slabel{display:block;margin:0 0 10px;color:var(--lb-meta);font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.lb-grid{display:grid;grid-template-columns:minmax(52px,.6fr) minmax(200px,2.2fr) minmax(108px,.9fr) minmax(102px,.85fr) minmax(130px,1.05fr) minmax(150px,1.2fr);align-items:stretch;gap:12px}
.lb-thead{min-width:0;padding:0 14px 7px 10px;border-left:2px solid transparent;border-right:2px solid transparent}
.lb-thead span{min-width:0;color:var(--lb-meta);font-family:var(--lb-mono);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.lb-thead span:nth-child(n+3){text-align:right}
.lb-rows{display:grid;gap:6px}
.rk{min-width:0;min-height:60px;box-sizing:border-box;padding:8px 14px 8px 10px;border:2px solid var(--line,#343434);background:var(--lb-raised);color:var(--lb-paper);text-align:left;transition:border-color 150ms ease}
a.rk:hover{border-color:var(--line-hi,#4A4A4A)}
.rk-rank{display:flex;min-width:0;align-items:center;color:#FAF424;font-size:22px}
.rk-idc{display:flex;min-width:0;align-items:center;gap:12px;padding-right:14px}
.rk-name{min-width:0;max-width:100%;overflow-wrap:anywhere;color:var(--lb-paper);font-size:20px;line-height:1.05;text-transform:uppercase}
.rk-stats{display:contents}
.rk-f{display:flex;min-width:0;flex-direction:column;align-items:flex-end;justify-content:center;color:var(--lb-paper);font-family:var(--lb-mono);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.rk-flbl{display:none;color:var(--lb-meta);font-family:var(--lb-mono);font-size:10px;font-weight:800;letter-spacing:.08em;line-height:1;text-transform:uppercase}
.rk-pnl{display:flex;min-width:0;align-items:center;justify-content:flex-end;color:var(--lb-paper);font-size:25px;line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-pnl[data-state="positive"]{color:#91BB4F}
.rk-pnl[data-state="negative"]{color:#EA2A46}

/* focus: the house ring (theirs is paper; ours is the DS orange) */
.pod:focus-visible,.rk:focus-visible,.tc:focus-visible,.lb-pill:focus-visible,.lb-step:focus-visible{outline:3px solid #FFA800;outline-offset:3px}

/* ── their max-width:1279px ── */
@media (max-width:1279px){
  .lb-board{padding:20px 14px 40px}
  .lb-podium{margin-top:28px}
  .lb-stack{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .pod,.pod[data-rank="2"],.pod[data-rank="3"]{min-height:190px}
  .pod[data-rank="1"]{min-height:250px}
  .pod-c{padding:16px 14px 0}
  .pod-lock{margin-bottom:14px}
  .pod-lbl{font-size:10px;letter-spacing:.08em}
  .pod-name{font-size:29px}
  .pod[data-rank="1"] .pod-name{font-size:32px}
  .pod-profit{font-size:36px}
  .pod[data-rank="1"] .pod-profit{font-size:42px}
  .pod-rule{margin-right:-14px;margin-left:-14px;padding:10px 5px 12px}
  .pod-stat{padding:0 7px}
  .pod-slbl{font-size:10px;letter-spacing:.08em}
  .pod-sval{font-size:12px}
  .lb-titles,.lb-boardsec{margin-top:28px}
  .lb-strow{align-items:center;flex-wrap:wrap;gap:8px}
  .lb-sdate{font-size:10px}
  .lb-tgrid{grid-template-columns:1fr;gap:12px;margin-top:14px}
  .tc{gap:12px;padding:13px 14px}
  .tc-title{font-size:22px}
  .tc-id,.tc-eyb,.tc-slbl{font-size:10px}
  .tc-stat{min-width:84px;padding-left:12px}
  .tc-val{font-size:27px}
  .lb-thead{display:none}
  .lb-grid{grid-template-areas:"rank identity profit" "rank stats stats";grid-template-columns:44px minmax(0,1fr) max-content;gap:0}
  .rk{min-height:0;padding:10px}
  .rk-rank{grid-area:rank;align-items:flex-start;padding:6px 8px 0 2px}
  .rk-idc{grid-area:identity;align-items:flex-start;min-height:34px;padding:6px 8px 4px 10px}
  .rk-pnl{grid-area:profit;align-items:flex-start;justify-content:flex-start;padding:6px 0 0 8px;font-size:22px;text-align:right}
  .rk-stats{display:grid;grid-area:stats;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:8px}
  .rk-f{align-items:flex-start;gap:4px;padding:0 8px;font-size:12px;text-align:left}
  .rk-flbl{display:block}
}
/* their max-sm (639px): the controls drop under the title, centred; the steppers grow to 44px */
@media (max-width:639px){
  .lb-ctrls{width:100%;align-items:center}
  .lb-pills{justify-content:center}
  .lb-stepwrap{align-items:center}
  .lb-step{width:44px;height:44px}
  .lb-day{min-height:44px}
}
/* the 320 rung: the podium name and profit keep inside the card */
@media (max-width:359px){
  .pod-name{font-size:25px}.pod[data-rank="1"] .pod-name{font-size:27px}
  .pod-profit{font-size:31px}.pod[data-rank="1"] .pod-profit{font-size:36px}
  .pod-lock{padding-right:52px}
  .rk-pnl{font-size:19px}
  .lb-pill{padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){.pod,.lb-pill,.lb-step,.lb-day,.tc,.rk{transition:none}}
.static .pod,.static .lb-pill,.static .lb-step,.static .lb-day,.static .tc,.static .rk{transition:none}

/* ── the interaction vocabulary (/lib/category.css 21): the pills, the steppers and the day field are plates (a press lands
      on the shadow), the podium and the title cards are cards (a 4px lift), the ranks are rows (a keyline, a 1px lift) ── */
.lb-pill.ci-plate{--ci-sh:4px}.lb-step.ci-plate,.lb-day.ci-plate{--ci-sh:3px}
.pod.ci-card,.tc.ci-card{transition:translate 150ms cubic-bezier(0,0,.2,1),border-color 150ms ease,background-color 150ms ease}
.rk.ci-row{--ci-key:rgb(250 244 36 / 45%);transition:translate 150ms cubic-bezier(0,0,.2,1),box-shadow 150ms,border-color 150ms ease,background-color 150ms}
/* the first view: the podium rises 2, 1, 3 (CadeMotion.popIn), the figures count up (CadeMotion.rollIn) */
.pod-profit,.pod-sval,.tc-val{font-variant-numeric:tabular-nums}

/* the hero art (.c-art): the trophy banner right-anchored behind the masthead and the podium's top, faded into the ground */
.lb-board.c-art{--hero-art:url(/assets/art/heroes/leaderboard.jpg);--hero-art-m:url(/assets/art/heroes/leaderboard-m.jpg);--art-top:-60px;--art-right:0px;--art-w:min(54%,860px);--art-o:.6}
@media (max-width:720px){.lb-board.c-art{--art-top-m:-40px;--art-right-m:0px;--art-w-m:100%;--art-o-m:.4}}