/* Leaderboards v2 (/leaderboards) - owner's mockup (1672 px wide): hero + search, CATEGORIES sidebar, Season/All-time + month +
   "Season ends" pill, top-3 podium cards (art cut from the mockup: assets/img/leaderboards/), ranked table, Your rank + Monthly winner */
.page-leaderboards main { z-index: auto; }
.lbx-wrap { width: 100%; max-width: 1518px; margin: 0 auto; padding: 0 16px; }

/* hero */
.lbx-hero { position: relative; height: 135px; background: #0c0b0a url(../img/leaderboards/hero.jpg?v=sd1) center bottom / cover no-repeat; border-bottom: 1px solid #201e1b; }
.lbx-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 8, 7,.35), rgba(9, 8, 7,0) 45%); }
.lbx-hero-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; padding-left: 49px; }
.lbx-title h1 { margin: 0; font: 900 61px/1 Inter, sans-serif; letter-spacing: -.005em; color: #fff; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0, 0, 0,.5); }
.lbx-title h1 span { color: var(--neon, #d9b26a); text-shadow: 0 0 22px color-mix(in srgb, var(--neon, #d9b26a) 35%, transparent); }
.lbx-title p { margin: 9px 0 0 2px; font: 400 19px/1.2 Inter, sans-serif; color: #f7f4f0; text-shadow: 0 1px 8px rgba(0, 0, 0,.7); }

/* search boxes (hero + table) */
.lbx-find { position: relative; display: flex; align-items: center; margin: 0; }
.lbx-find .ic { position: absolute; left: 13px; width: 17px; height: 17px; color: #dcd3c9; pointer-events: none; }
.lbx-find input { width: 100%; height: 36px; padding: 0 12px 0 42px; border: 1px solid #383530; border-radius: 7px; background: rgba(13, 12, 11,.85); color: #efedea; font: 400 13.5px Inter, sans-serif; }
.lbx-find input::placeholder { color: #96948f; }
.lbx-find input:focus { outline: 0; border-color: var(--neon, #d9b26a); }
.lbx-find input::-webkit-search-cancel-button { filter: invert(.7); }
.lbx-find.big { width: 307px; }
.lbx-find.big input { height: 41px; padding-left: 45px; font-size: 14px; border-color: #413f3b; border-radius: 8px; background: rgba(10, 10, 9,.82); }
.lbx-find.big .ic { left: 15px; width: 18px; height: 18px; }

/* layout */
.lbx-main { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 33px; align-items: start; padding-top: 16px; padding-bottom: 14px; }
.lbx-side { padding: 12px 11px 14px; border: 1px solid #2e2b27; border-radius: 9px; background: #11100f; }
.lbx-side h2 { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px 13px; font: 800 14.5px Inter, sans-serif; letter-spacing: .06em; color: #fff; text-transform: uppercase; }
.lbx-side h2 .ic { width: 18px; height: 18px; color: var(--neon, #d9b26a); }
.lbx-side nav { display: flex; flex-direction: column; }
.lbx-side nav a { display: flex; align-items: center; gap: 20px; height: 42px; margin-bottom: 5px; padding: 0 12px 0 17px; border-radius: 6px; color: #f4f0eb; white-space: nowrap; font: 400 14px Inter, sans-serif; position: relative; }
.lbx-side nav a + a::before { content: ''; position: absolute; left: 6px; right: 4px; top: -3px; border-top: 1px solid #23211d; }
.lbx-side nav a .ic:first-child { width: 23px; height: 23px; flex: none; color: var(--neon, #d9b26a); }
.lbx-side nav a.gold .ic:first-child { color: #e3c07c; }
.lbx-side nav a span { flex: 1; }
.lbx-side nav a .ic:last-child { width: 15px; height: 15px; color: #b8b5af; }
.lbx-side nav a:hover { background: #1a1916; }
.lbx-side nav a.on { background: var(--neon, #d9b26a); color: #100f0e; box-shadow: 0 0 16px color-mix(in srgb, var(--neon, #d9b26a) 28%, transparent); }
.lbx-side nav a.on::before, .lbx-side nav a.on + a::before { display: none; }
.lbx-side nav a.on .ic { color: #100f0e !important; }
.lbx-side hr { margin: 6px 4px 11px; border: 0; border-top: 1px solid #36342f; }
.lbx-side hr + a::before { display: none; }

/* tools row */
.lbx-tools { display: flex; align-items: center; gap: 15px; margin: 3px 0 18px; }
.lbx-toggle { display: inline-flex; width: 260px; height: 40px; padding: 0; border: 1px solid #3b3833; border-radius: 9px; background: #100f0e; }
.lbx-toggle a { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #f3eee8; font: 500 14.5px Inter, sans-serif; }
.lbx-toggle a.on { background: var(--neon, #d9b26a); color: #100f0e; box-shadow: 0 0 14px color-mix(in srgb, var(--neon, #d9b26a) 30%, transparent); margin: -1px; }
.lbx-toggle.off a { color: #989691; }
.lbx-pick { position: relative; display: flex; align-items: center; width: 220px; height: 40px; margin: 0; }
.lbx-pick .ic { position: absolute; width: 18px; height: 18px; color: #ded6cd; pointer-events: none; }
.lbx-pick .ic:first-of-type { left: 17px; }
.lbx-pick .ic:last-of-type { right: 17px; width: 16px; height: 16px; }
.lbx-pick select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 40px 0 50px; border: 1px solid #3b3833; border-radius: 9px; background: #100f0e; color: #f7f4f0; font: 500 14.5px Inter, sans-serif; cursor: pointer; color-scheme: dark; }
.lbx-pick select:focus { outline: 0; border-color: var(--neon, #d9b26a); }
.lbx-pick.off { opacity: .45; }
.lbx-pick.off select { cursor: default; }
.lbx-ends { margin-left: auto; display: inline-flex; align-items: center; gap: 13px; height: 38px; padding: 0 14px 0 14px; border: 1px solid #3b3833; border-radius: 10px; background: #100f0e; color: #f3eee8; font: 500 13.5px Inter, sans-serif; white-space: nowrap; }
.lbx-ends .ic { width: 17px; height: 17px; color: var(--neon, #d9b26a); }
.lbx-ends .ic:last-child { color: #ded6cd; margin-left: 4px; }

/* search results */
.lbx-found { margin: -4px 0 16px; padding: 14px 16px; border: 1px solid #302e29; border-radius: 10px; background: #100f0e; }
.lbx-found h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font: 700 15px Inter, sans-serif; color: #fff; }
.lbx-found h3 .ic { width: 17px; height: 17px; color: var(--neon, #d9b26a); }
.lbx-found h3 a { margin-left: auto; color: var(--neon, #d9b26a); font-size: 13px; font-weight: 500; }
.lbx-found-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lbx-found-list a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 8px 12px; border: 1px solid #312e29; border-radius: 8px; background: #181613; color: inherit; }
.lbx-found-list a:hover { border-color: var(--neon, #d9b26a); }
.lbx-found-list b { color: #fff; font-size: 14px; }
.lbx-found-list small { grid-row: 2; color: #aaa7a1; font-size: 12px; }
.lbx-found-list .ic { grid-row: 1 / 3; grid-column: 2; width: 15px; height: 15px; color: var(--neon, #d9b26a); }

/* podium */
.lbx-podium { display: grid; grid-template-columns: 375fr 410fr 372fr; gap: 15px; align-items: center; margin-bottom: 18px; }
.lbx-pod { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 186px; padding: 16px 26px 0; border: 1px solid #5b5954; border-radius: 9px; overflow: hidden; background: #121110 url(../img/leaderboards/card-2.jpg?v=sd1) right center / cover no-repeat; color: inherit; }
.lbx-pod.p1 { height: 194px; padding-top: 18px; border: 1.5px solid #d9aa3c; background-image: url(../img/leaderboards/card-1.jpg?v=sd1); box-shadow: 0 0 18px rgba(217, 170, 60,.25), inset 0 0 22px rgba(217, 170, 60,.08); }
.lbx-pod.p3 { border-color: #4a3b33; background-image: url(../img/leaderboards/card-3.jpg?v=sd1); }
a.lbx-pod:hover { filter: brightness(1.12); }
.lbx-pos { font: 900 31px/1 Inter, sans-serif; background: linear-gradient(180deg, #f3efeb, #a3a09c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p1 .lbx-pos { background-image: linear-gradient(180deg, #ffe08a, #e0a52c); }
.p3 .lbx-pos { background-image: linear-gradient(180deg, #f1b48c, #b88f43); }
.lbx-pname { margin-top: 13px; max-width: 62%; font: 700 20px/1.1 Inter, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbx-pname.empty { color: #b5b3ae; }
.lbx-pjob { display: flex; align-items: center; gap: 9px; margin-top: 10px; font: 400 14px Inter, sans-serif; color: #ece6df; }
.lbx-pjob .ic { width: 16px; height: 16px; }
.lbx-pval { margin-top: 14px; font: 800 31px/1 Inter, sans-serif; color: #fff; letter-spacing: -.01em; }
.lbx-punit { margin-top: 10px; font: 600 12px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #f0e1c4; }
.p1 .lbx-punit { color: #f2d48a; }

/* job icons (table + cards) */
:is(.lbx-pjob, .lbx-job).job .ic { color: #dfbd7e; }
.p1 .lbx-pjob.job .ic { color: #e3c07c; }
:is(.lbx-pjob, .lbx-job).mech .ic { color: #f39b2f; }
:is(.lbx-pjob, .lbx-job).ems .ic { color: #c06559; }
:is(.lbx-pjob, .lbx-job).civ .ic { color: #d2c8bd; }
:is(.lbx-pjob, .lbx-job).bug .ic { color: var(--err, #c46a5e); }
/* Top Beta Testers: staff rank next to the name */
.lbx-name em { flex: none; padding: 1px 9px; border: 1px solid #4a4640; border-radius: 6px; color: #b8b5af; font: 600 12px/1.25 Inter, sans-serif; font-style: normal; }

/* table */
.lbx-table { border: 1px solid #302e29; border-radius: 9px; background: #0f0e0c; overflow: hidden; }
.lbx-thead { display: flex; align-items: center; gap: 16px; height: 54px; padding: 0 10px 0 19px; border-bottom: 1px solid #292622; background: linear-gradient(180deg, #161412, #11100f); }
.lbx-tt { display: flex; align-items: baseline; gap: 18px; flex: 1; min-width: 0; }
.lbx-tt .ic { align-self: center; width: 23px; height: 23px; color: var(--neon, #d9b26a); margin-right: -6px; }
.lbx-tt b { font: 800 19px Inter, sans-serif; color: #fff; white-space: nowrap; }
.lbx-tt small { font: 400 14px Inter, sans-serif; color: #b0ada8; white-space: nowrap; }
.lbx-thead .lbx-find { width: 258px; }
.lbx-cols, .lbx-row { display: grid; grid-template-columns: 52px 72px minmax(0, 477fr) minmax(0, 380fr) 160px; align-items: center; padding: 0 25px 0 22px; }
.lbx-cols { height: 34px; font: 700 11px Inter, sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--neon, #d9b26a); }
.lbx-cols span:last-child, .lbx-val { text-align: right; }
.lbx-rows { max-height: 210px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3b3833 transparent; }
.lbx-row { height: 34px; border-top: 1px solid #1f1d1a; color: inherit; }
.lbx-row:first-child { border-top: 0; }
.lbx-row:hover { background: #1a1916; }
.lbx-row[hidden] { display: none; }
.lbx-rank { font: 700 15.5px Inter, sans-serif; color: #e0d9d0; }
.lbx-row.r1 .lbx-rank { color: #e3c07c; }
.lbx-row.r3 .lbx-rank { color: #f0a050; }
.lbx-crown .ic { width: 19px; height: 19px; color: #e3c07c; }
.lbx-name { display: flex; align-items: center; gap: 22px; min-width: 0; }
.lbx-name b { font: 700 14px Inter, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbx-name i { flex: none; padding: 2px 11px; border-radius: 6px; background: var(--neon, #d9b26a); color: #100f0e; font: 700 12.5px/1.25 Inter, sans-serif; font-style: normal; }
.lbx-job { display: flex; align-items: center; gap: 13px; font: 400 13px Inter, sans-serif; color: #ece6df; min-width: 0; white-space: nowrap; }
.lbx-job .ic { width: 17px; height: 17px; flex: none; }
.lbx-val { font: 700 14.5px Inter, sans-serif; color: #fff; white-space: nowrap; }
.lbx-row.you { height: 37px; margin: 0 0 2px; border: 1.5px solid var(--neon, #d9b26a); border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--neon, #d9b26a) 10%, transparent), color-mix(in srgb, var(--neon, #d9b26a) 3%, transparent)); box-shadow: 0 0 12px color-mix(in srgb, var(--neon, #d9b26a) 25%, transparent); }
.lbx-row.you .lbx-rank { color: var(--neon, #d9b26a); }
.lbx-row.you + .lbx-row { border-top: 0; }
.lbx-none { margin: 0; padding: 20px 22px; color: #aaa7a1; font-size: 14px; }

/* bottom: your rank + monthly winner */
.lbx-bottom { display: grid; grid-template-columns: 618fr 556fr; gap: 14px; margin-top: 14px; }
.lbx-mine { display: flex; align-items: center; height: 88px; padding: 0 0 0 30px; border: 1.5px solid var(--neon, #d9b26a); border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--neon, #d9b26a) 7%, transparent), #100f0e 70%); box-shadow: 0 0 14px color-mix(in srgb, var(--neon, #d9b26a) 15%, transparent); }
.lbx-mine-ic .ic { width: 25px; height: 28px; color: var(--neon, #d9b26a); }
.lbx-mine > div { display: flex; flex-direction: column; gap: 6px; padding: 0 30px; }
.lbx-mine > div:nth-child(2) { padding-left: 28px; min-width: 130px; }
.lbx-mine > div + div:not(:nth-child(2)) { border-left: 1px solid #4a4640; }
.lbx-mine > div:nth-child(3) { min-width: 211px; }
.lbx-mine small { font: 400 14px Inter, sans-serif; color: #d9d1c8; }
.lbx-mine b { display: flex; align-items: center; gap: 12px; font: 800 24px/1.05 Inter, sans-serif; color: #fff; white-space: nowrap; }
.lbx-mine b.cy { font: 900 33px/1 Inter, sans-serif; color: var(--neon, #d9b26a); }
.lbx-mine b .ic { width: 18px; height: 18px; color: var(--neon, #d9b26a); }
.lbx-mine b a { font-size: 16px; font-weight: 600; color: var(--neon, #d9b26a); }
.lbx-prize { display: flex; align-items: center; gap: 23px; height: 88px; padding: 0 30px 0 32px; border: 1px solid rgba(216, 170, 64,.55); border-radius: 7px; background: #0d0c0a url(../img/leaderboards/winner.jpg?v=sd1) right center / cover no-repeat; }
.lbx-prize > i .ic { width: 40px; height: 40px; color: #e3c07c; }
.lbx-prize > div { display: flex; flex-direction: column; gap: 5px; }
.lbx-prize b { font: 800 20px Inter, sans-serif; color: #e3c07c; }
.lbx-prize small { font: 400 14px Inter, sans-serif; color: #e2dcd5; max-width: 240px; }

/* smaller screens */
@media (max-width: 1250px) {
  .lbx-main { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lbx-side { padding: 8px; }
  .lbx-side h2 { display: none; }
  .lbx-side nav { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: thin; }
  .lbx-side nav a { flex: none; gap: 10px; margin: 0; height: 38px; padding: 0 14px; }
  .lbx-side nav a::before, .lbx-side nav a .ic:last-child { display: none; }
  .lbx-side hr { margin: 0 4px; border: 0; border-left: 1px solid #36342f; }
  .lbx-tools { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .lbx-hero { height: auto; }
  .lbx-hero::before { background: rgba(9, 8, 7,.55); }
  .lbx-hero-in { flex-direction: column; align-items: flex-start; padding: 22px 16px; }
  .lbx-title h1 { font-size: 38px; }
  .lbx-title p { font-size: 15px; }
  .lbx-find.big { width: 100%; }
  .lbx-podium { grid-template-columns: minmax(0, 1fr); }
  .lbx-pod, .lbx-pod.p1 { height: auto; min-height: 170px; padding-bottom: 16px; }
  .lbx-pod.p1 { order: -1; }
  .lbx-bottom { grid-template-columns: minmax(0, 1fr); }
  .lbx-ends { margin-left: 0; }
}
@media (max-width: 640px) {
  .lbx-toggle, .lbx-pick { width: 100%; }
  .lbx-thead { flex-wrap: wrap; height: auto; padding: 10px 12px; }
  .lbx-thead .lbx-find { width: 100%; }
  .lbx-cols, .lbx-row { grid-template-columns: 44px 26px minmax(0, 1fr) auto; padding: 0 12px; }
  .lbx-cols span:nth-child(4), .lbx-job { display: none; }
  .lbx-name { gap: 8px; }
  .lbx-rows { max-height: 320px; }
  .lbx-mine { height: auto; flex-wrap: wrap; padding: 14px; row-gap: 12px; }
  .lbx-mine > div { padding: 0 14px; }
  .lbx-mine > div:nth-child(3), .lbx-mine > div:nth-child(2) { min-width: 0; }
  .lbx-mine > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .lbx-prize { padding: 0 18px; gap: 14px; background: linear-gradient(90deg, #0d0c0a 55%, rgba(13, 12, 10,0) 80%), url(../img/leaderboards/winner.jpg?v=sd1) right center / auto 100% no-repeat, #0d0c0a; }
  .foot-note { padding-left: 0; border-left: 0; }
}