/* BACK2BACK17 Park leaderboard (/leaderboard). Loaded after site.css and community.css and uses their colours,
   type, top bar, region tabs, cards, tables and footer. Same rules as the rest of the site: a strict CSP (no inline
   styles), nothing moves, no shadows or blur. Bars are <progress> elements (community.css .pf-bar). */

/* ------------------------------------------------------------------ hero */
.lb-hero { border-bottom: 1px solid var(--hair); background: var(--pure); }
.lb-hero-inner { max-width: var(--page); margin: 0 auto; padding: clamp(32px, 6vw, 60px) 24px clamp(26px, 4vw, 40px); }
.lb-title {
  margin: 10px 0 0;
  font: 700 clamp(52px, 8vw, 96px)/.9 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  transform: skewX(-9deg);
  transform-origin: 0 100%;
}
.lb-lede { max-width: 34em; margin: 16px 0 0; color: var(--secondary); font-size: clamp(15px, 1.5vw, 17px); }

.lb-body { max-width: var(--page); min-height: 50vh; margin: 0 auto; padding: 0 24px clamp(40px, 6vw, 72px); }
.lb-body > .pf-state { margin: 0 -24px; }
.lb-notes:empty { display: none; }
.lb-first { margin-top: 36px; }

/* ------------------------------------------------------------------ photos and emblems */
.lb-ava {
  position: relative;
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: radial-gradient(ellipse 70% 60% at 50% 70%, #1f1f1f, #0d0d0d 65%, var(--pure));
}
.lb-ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-ava.owl .lb-ava-img { visibility: hidden; }
.lb-ava-owl { position: absolute; top: 50%; left: 50%; width: 62%; height: auto; transform: translate(-50%, -50%); opacity: .55; }
.lb-ava.small { width: 34px; height: 34px; }
.lb-ava.big { width: 100%; height: 100%; border: 0; }
.lb-ava.big .lb-ava-owl { width: 40%; opacity: .8; }
.lb-emblem { width: 40px; height: 40px; max-width: none; flex: none; object-fit: contain; aspect-ratio: 1; --glow: rgba(247, 247, 247, .08); background: radial-gradient(circle, var(--glow) 0, transparent 68%); }
.lb-emblem.row { width: 64px; height: 64px; }
/* a flat halo per tier so the six owls tell apart at a glance (the art itself is gold on dark for every tier) */
.lb-emblem.e-skull { --glow: rgba(169, 175, 182, .35); }
.lb-emblem.e-blade { --glow: rgba(180, 148, 92, .45); }
.lb-emblem.e-shotgun { --glow: rgba(242, 120, 26, .45); }
.lb-emblem.e-elite { --glow: rgba(242, 16, 26, .5); }
.lb-emblem.e-baller { --glow: rgba(255, 214, 102, .6); }

/* ------------------------------------------------------------------ top 3 */
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lb-podium.n1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.lb-podium.n2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
.lb-pod { min-width: 0; padding: 0 0 20px; border: 1px solid var(--hair); border-top: 3px solid var(--border); background: var(--surface); }
.lb-pod.p1 { border-top-color: var(--red); background: var(--raised); }
.lb-pod.p2 { border-top-color: var(--secondary); }
.lb-pod.p3 { border-top-color: var(--gold); }
.lb-pod-photo { position: relative; aspect-ratio: 1 / 1; margin: 0 0 18px; border-bottom: 1px solid var(--hair); }
.lb-pod.p1 .lb-pod-photo { aspect-ratio: 5 / 6; }
.lb-pod-place {
  position: absolute;
  top: 10px;
  left: 16px;
  color: var(--chalk);
  font: 700 64px/1 var(--headline);
  font-stretch: condensed;
  transform: skewX(-9deg);
}
.lb-pod.p1 .lb-pod-place { color: var(--red); font-size: 84px; }
.lb-emblem.pod { position: absolute; right: 10px; bottom: -26px; width: 92px; height: 92px; }
.lb-pod.p1 .lb-emblem.pod { width: 116px; height: 116px; bottom: -32px; }
.lb-pod-rank { margin: 0; padding: 0 20px; color: var(--gold); font: 700 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.lb-pod-name {
  margin: 8px 0 0;
  padding: 0 20px;
  font: 700 clamp(28px, 3.2vw, 40px)/.95 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transform: skewX(-9deg);
  transform-origin: 0 100%;
}
.lb-pod-name a { color: var(--chalk); text-decoration: none; }
.lb-pod-name a:hover { color: var(--gold); }
.lb-pod-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 18px 0 0; padding: 16px 20px 0; border-top: 1px solid var(--hair); }
.lb-pod-stats dt { color: var(--muted); font: 600 11px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.lb-pod-stats dd { margin: 4px 0 0; color: var(--chalk); font: 700 19px/1.15 var(--display); }
.lb-pod-stats dd.big { font: 700 34px/1 var(--headline); font-stretch: condensed; }

/* ------------------------------------------------------------------ the ranks */
.lb-tools { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.lb-search {
  width: min(320px, 100%);
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--pure);
  color: var(--chalk);
  font: 600 15px/1.2 var(--display);
}
.lb-search::placeholder { color: var(--muted); }
.lb-search:focus-visible { outline-offset: 0; border-color: var(--gold); }
.lb-table td { vertical-align: middle; }
.lb-table td.lb-place { width: 1%; color: var(--muted); font: 700 20px/1 var(--headline); font-stretch: condensed; text-align: right; }
.lb-table tr.lb-top3 td.lb-place { color: var(--red); }
.lb-table td.lb-player { width: 40%; white-space: normal; }
.lb-player-in { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-player-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-name { color: var(--chalk); font: 700 16px/1.15 var(--display); text-decoration: none; overflow-wrap: break-word; }
a.lb-name:hover { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.lb-sub { color: var(--gold); font: 600 11px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.lb-sub:empty { display: none; }
.lb-table td.lb-rankcell { width: 1%; min-width: 76px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.lb-table td.lb-pct { font-size: 17px; }
.lb-rating { white-space: nowrap; }
.lb-change { margin-left: 6px; font: 600 12px/1 var(--display); letter-spacing: .02em; vertical-align: middle; }
.lb-change.up { color: var(--gold); }
.lb-change.down { color: var(--red); }
.lb-streak { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border: 1px solid var(--border); color: var(--muted); font: 700 12px/1 var(--display); }
.lb-streak.win { border-color: var(--red); background: var(--red); color: #fff; }
.lb-streak.none { border-color: transparent; }
.lb-rep { display: inline-flex; align-items: center; gap: 8px; color: var(--secondary); white-space: nowrap; }
.lb-rep-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--tier); }
.r-rookie { --tier: #8a5f3d; }
.r-pro { --tier: #a9afb6; }
.r-all-star { --tier: #b4945c; }
.r-superstar { --tier: #f2101a; }
.r-legend { --tier: #f7f7f7; }
.lb-more-wrap { display: flex; justify-content: center; margin: 16px 0 0; }
.lb-more-wrap .pf-btn[hidden] { display: none; }

/* ------------------------------------------------------------------ leaders */
.lb-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lb-board-list { margin: 0; padding: 0; list-style: none; }
.lb-board-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.lb-board-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.lb-board-list li:first-child { padding-top: 0; }
.lb-board-n { width: 18px; flex: none; color: var(--muted); font: 700 16px/1 var(--headline); font-stretch: condensed; text-align: right; }
.lb-board-list li:first-child .lb-board-n { color: var(--red); }
.lb-board-who { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.lb-board-who .lb-name { font-size: 15px; }
.lb-board-val { flex: none; color: var(--chalk); font: 700 18px/1 var(--display); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ almost ranked */
.lb-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lb-next .pf-card { padding: 14px 16px 16px; }
.lb-next-top { display: flex; align-items: center; gap: 12px; }
.lb-next-left { flex: none; color: var(--muted); font: 600 11px/1.2 var(--display); letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.lb-next-left b { display: block; color: var(--chalk); font: 700 22px/1 var(--headline); font-stretch: condensed; letter-spacing: 0; }
.lb-next .pf-bar { margin-top: 12px; }

/* ------------------------------------------------------------------ how ranks work */
.lb-tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lb-tiers li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 18px; text-align: center; }
.lb-emblem.tier { width: 96px; height: 96px; }
.lb-tiers b { font: 700 22px/1 var(--headline); font-stretch: condensed; text-transform: uppercase; }
.lb-tiers span { color: var(--gold); font: 600 11.5px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.lb-rules { margin-top: 16px; }
.lb-rules p:not(.pf-label) { margin: 0 0 10px; color: var(--secondary); font-size: 14.5px; }
.lb-variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.lb-variants li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.lb-emblem.variant { width: 64px; height: 64px; }
.lb-variants b { font: 700 15px/1.1 var(--display); text-transform: uppercase; }
.lb-variants span { color: var(--muted); font: 600 11px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 960px) {
  .lb-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-hide-m { display: none; }
}
@media (max-width: 760px) {
  .lb-podium, .lb-podium.n1, .lb-podium.n2 { grid-template-columns: minmax(0, 1fr); }
  .lb-pod { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; padding: 0; }
  .lb-pod.p1 { order: -1; }
  .lb-pod-photo, .lb-pod.p1 .lb-pod-photo { grid-row: 1 / 4; aspect-ratio: auto; height: 100%; min-height: 168px; margin: 0; border-right: 1px solid var(--hair); border-bottom: 0; }
  .lb-pod-place, .lb-pod.p1 .lb-pod-place { top: 6px; left: 10px; font-size: 44px; }
  .lb-emblem.pod, .lb-pod.p1 .lb-emblem.pod { right: 4px; bottom: 4px; width: 60px; height: 60px; }
  .lb-pod-rank { padding: 14px 16px 0; }
  .lb-pod-name { padding: 0 16px; font-size: 30px; }
  .lb-pod-stats { margin: 12px 0 0; padding: 12px 16px 14px; gap: 8px 12px; }
  .lb-pod-stats dd.big { font-size: 28px; }
}
@media (max-width: 600px) {
  .lb-hero-inner { padding-right: 16px; padding-left: 16px; }
  .lb-body { padding-right: 16px; padding-left: 16px; }
  .lb-body > .pf-state { margin: 0 -16px; }
  .lb-boards { grid-template-columns: minmax(0, 1fr); }
  .lb-hide-s { display: none; }
  .lb-table td.lb-player { width: auto; }
  .lb-tools { justify-content: stretch; }
  .lb-search { width: 100%; }
  .lb-emblem.row { width: 48px; height: 48px; }
  .lb-ava { width: 34px; height: 34px; }
  .lb-table .lb-player .lb-ava { display: none; }          /* the rank emblem stays: names get the room */
  .lb-table th, .lb-table td { padding-right: 8px; padding-left: 8px; }
  .lb-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-emblem.tier { width: 80px; height: 80px; }
}