/* MZO site: leaderboards page, "THE STAGE" design (/leaderboard.php). Loads after core.css.
   BO7's 3D menu room as the stage, the top 3 of the picked board on plinths, the five boards the mod's own BO7
   leaderboards have, then the ranked list and BO7's PLAYER SNAPSHOT panel. Art: /site/leaderboard
   (build_leaderboard_art.py). Page accent: podium gold. */

.page-leaderboard { --au: #f2c14e; --au-2: #ffe29a; --ag: #c9d1da; --cu: #d08a4a; }

/* ---- STAGE ---- */
.stage { position: relative; isolation: isolate; margin-top: calc(-1 * var(--pm, 0rem)); padding: calc(7rem + var(--pm, 0rem)) var(--g) 0; /* art runs under the top bar like HOME */ overflow: hidden; }
.st-art { position: absolute; inset: 0; z-index: -1; background: var(--bg) center 40% / cover no-repeat; }
.st-art::after { content: ""; position: absolute; inset: 0; background:
	radial-gradient(60% 55% at 50% 72%, rgba(242, 193, 78, .16), transparent 70%),
	linear-gradient(180deg, rgba(5, 6, 8, .78) 0%, rgba(5, 6, 8, .2) 35%, rgba(5, 6, 8, .35) 70%, var(--bg-0, #050608) 100%); }
.st-art i { position: absolute; left: 50%; bottom: 8%; width: 70rem; height: 22rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(98, 213, 241, .18), transparent); filter: blur(10px); animation: hex-pulse 6s ease-in-out infinite; }
.st-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; }
.st-title p { margin: 0; font: 700 max(11px, 1.125rem) var(--head); letter-spacing: .22em; color: #e8ecef; }
.st-title h1 { font: 900 clamp(max(11px, 3rem), 7vw, 6.5rem) / .9 var(--head); letter-spacing: .02em; text-shadow: 0 0.5rem 2rem rgba(0, 0, 0, .7); }
.st-sub { display: block; margin-top: 0.625rem; font: 700 max(10px, 0.8125rem) var(--head); letter-spacing: .16em; color: var(--muted); }

.boards { display: flex; gap: 0.5rem; }
.bd { position: relative; display: grid; justify-items: center; gap: 0.375rem; width: 8.25rem; padding: 0.875rem 0.5rem 0.75rem; background: linear-gradient(180deg, rgba(20, 23, 29, .78), rgba(8, 9, 12, .88)); border: 1px solid #2a2f37; backdrop-filter: blur(4px); transition: border-color .2s, transform .3s var(--ease), background .2s; }
.bd img { width: 2.75rem; height: 2.75rem; object-fit: contain; opacity: .7; filter: grayscale(.4); transition: opacity .2s, filter .2s, transform .3s var(--snap); }
.bd span { font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .12em; color: #aebbc2; white-space: nowrap; }
.bd::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--au); transform: scaleX(0); transition: transform .3s var(--ease); }
.bd:hover { border-color: #59626d; transform: translateY(-0.125rem); }
.bd:hover img { opacity: 1; filter: none; transform: scale(1.08); }
.bd.is-on { border-color: rgba(242, 193, 78, .7); background: linear-gradient(180deg, rgba(242, 193, 78, .16), rgba(8, 9, 12, .9)); }
.bd.is-on img { opacity: 1; filter: drop-shadow(0 0 0.625rem rgba(242, 193, 78, .5)); }
.bd.is-on span { color: #fff; }
.bd.is-on::after { transform: scaleX(1); }

.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 1.25rem; max-width: 64rem; margin: 2.5rem auto 0; }
.plinth { position: relative; display: grid; justify-items: center; text-align: center; color: inherit; animation: rise-in .7s var(--ease) both; animation-delay: calc(var(--o) * 120ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(2rem); } }
.pl-who { display: grid; justify-items: center; gap: 0.375rem; padding-bottom: 0.875rem; }
.pl-pic { position: relative; width: 6.5rem; height: 6.5rem; }
.pl-pic img.av { width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--m); box-shadow: 0 0 1.75rem color-mix(in srgb, var(--m) 45%, transparent); transition: transform .3s var(--snap); }
.pl-pic img.rk { position: absolute; right: -1.25rem; bottom: -0.75rem; width: 3rem; height: 3rem; object-fit: contain; filter: drop-shadow(0 0.25rem 0.5rem #000); }
.plinth:hover .pl-pic img.av { transform: translateY(-0.25rem) scale(1.04); }
.pl-name { max-width: 100%; font: 900 max(11px, 1.5rem) / 1.1 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub { font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .14em; color: #c3c9d0; }
.pl-sub.is-live { color: #7cf29b; }
.pl-block { position: relative; width: 100%; height: var(--h); padding-top: 0.875rem; background: linear-gradient(180deg, color-mix(in srgb, var(--m) 26%, #12151b), #0a0c10 85%); border: 1px solid color-mix(in srgb, var(--m) 55%, transparent); border-bottom: 0; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.pl-block::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 2px; background: var(--m); box-shadow: 0 0 1rem var(--m); }
.pl-n { display: block; font: 900 max(11px, 3.25rem) / 1 var(--head); color: var(--m); text-shadow: 0 0 1.5rem color-mix(in srgb, var(--m) 50%, transparent); }
.pl-v { display: block; margin-top: 0.375rem; font: 900 max(11px, 1.75rem) / 1 var(--head); font-variant-numeric: tabular-nums; }
.pl-k { display: block; margin-top: 0.25rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.plinth.p1 { --m: var(--au); --h: 14rem; }
.plinth.p2 { --m: var(--ag); --h: 10.75rem; }
.plinth.p3 { --m: var(--cu); --h: 9rem; }
.plinth.p1 .pl-pic { width: 8rem; height: 8rem; }
.plinth.p1 .trophy { position: absolute; top: -2.75rem; left: 50%; width: 2.5rem; height: 2.5rem; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 0 0.75rem rgba(242, 193, 78, .8)) sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.1); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translate(-50%, -0.375rem); } }
.plinth.is-empty .pl-pic { border: 1px dashed #3a414b; }
.plinth.is-empty .pl-name { color: #4a525c; }
.plinth.is-me .pl-name::after { content: "YOU"; margin-left: 0.5rem; padding: 0 0.375rem; font-size: .5em; vertical-align: middle; background: var(--au); color: #000; }

/* ---- LADDER strip ---- */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 var(--g); background: linear-gradient(180deg, rgba(10, 12, 16, .7), rgba(10, 12, 16, .95)); border-top: 1px solid rgba(242, 193, 78, .25); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ladder div { position: relative; padding: 1rem 1.25rem; min-width: 0; }
.ladder div + div::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: rgba(255, 255, 255, .14); }
.ladder dt { font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.ladder dd { margin: 0.125rem 0 0; font: 900 max(11px, 1.75rem) / 1.1 var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder dd small { margin-left: 0.5rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .1em; color: var(--muted); }
.ladder .lad-live { color: #7cf29b; }
.ladder .lad-lead { color: var(--au-2); }

/* ---- BOARD ---- */
.board { padding-top: 2rem; }
.bd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.bd-search { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 18rem; max-width: 28rem; padding: 0 0.875rem; height: 2.75rem; background: var(--panel); border: 1px solid var(--frame); transition: border-color .2s; }
.bd-search:focus-within { border-color: var(--au); }
.bd-search span { font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--au); }
.bd-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: #fff; font: 500 max(14px, 0.9375rem) var(--body); }
.bd-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { height: 2.25rem; padding: 0 0.875rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .12em; color: #aebbc2; background: rgba(14, 16, 21, .9); border: 1px solid #2a2f37; transition: border-color .2s, color .2s, background .2s; }
.chip:hover { border-color: #59626d; color: #fff; }
.chip.is-on { border-color: var(--au); color: #000; background: var(--au); }
.chip-me { margin-left: auto; border-color: rgba(242, 193, 78, .6); color: var(--au-2); }

.bd-main { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.25rem; align-items: start; }
.bd-list { min-width: 0; }
.bd-row { display: grid; grid-template-columns: 3.25rem 2.75rem minmax(0, 1fr) 4.5rem 9rem repeat(3, 7.5rem); gap: 0.75rem; align-items: center; min-height: 3.75rem; padding: 0.25rem 1rem 0.25rem 0.5rem; color: inherit; background: rgba(14, 16, 21, .9); border: 1px solid #23272f; transition: border-color .15s, background .15s; }
.bd-rows { display: grid; gap: 0.25rem; }
.bd-rows .bd-row { animation: in .4s var(--ease) both; animation-delay: calc(min(var(--i), 20) * 25ms); opacity: 0; transform: translateX(-0.5rem); }
.bd-headrow { min-height: 0; padding-top: 0; padding-bottom: 0.375rem; background: none; border: 0; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.bd-headrow .sort { color: var(--au); }
.bd-headrow .sort::after { content: " \25BC"; font-size: .8em; }
.bd-rows .bd-row:hover, .bd-rows .bd-row:focus-visible, .bd-rows .bd-row.is-focus { border-color: var(--au); background: linear-gradient(90deg, rgba(242, 193, 78, .1), rgba(14, 16, 21, .9) 60%); outline: 0; }
.bd-row.is-me { border-color: rgba(242, 193, 78, .55); box-shadow: inset 3px 0 0 var(--au); }
.bd-row .rk { font: 900 max(11px, 1.375rem) var(--head); text-align: center; color: #6d7681; font-variant-numeric: tabular-nums; }
.bd-row.r1 .rk { color: var(--au); } .bd-row.r2 .rk { color: var(--ag); } .bd-row.r3 .rk { color: var(--cu); }
.bd-row .pic { width: 2.75rem; height: 2.75rem; object-fit: cover; border: 1px solid var(--frame); }
.bd-row .who { min-width: 0; }
.bd-row .who b { display: block; font: 700 max(11px, 1.0625rem) / 1.15 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row .who small { display: block; font: 500 max(10px, 0.6875rem) var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row.is-live .who small { color: #7cf29b; }
.bd-row .lv { display: flex; align-items: center; gap: 0.25rem; font: 900 max(11px, 1rem) var(--head); color: #c3c9d0; }
.bd-row .lv img { width: 2rem; height: 2rem; object-fit: contain; }
.bd-row .c { min-width: 0; text-align: right; font: 700 max(11px, 0.9375rem) var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row .c0 { display: grid; gap: 0.25rem; font: 900 max(11px, 1.1875rem) var(--head); color: #fff; }
.bd-row .c0 i { display: block; height: 0.1875rem; background: rgba(255, 255, 255, .08); }
.bd-row .c0 i::before { content: ""; display: block; height: 100%; width: calc(var(--p) * 100%); margin-left: auto; background: linear-gradient(270deg, var(--au), rgba(242, 193, 78, .3)); }
.bd-headrow .c { font: inherit; white-space: normal; line-height: 1.15; overflow: visible; }
.bd-headrow { align-items: end; }
.bd-headrow .lv { font: inherit; color: inherit; }
.bd-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); border: 1px dashed #343a43; }

/* PLAYER SNAPSHOT */
.snap { position: sticky; top: 6rem; min-width: 0; background: linear-gradient(180deg, rgba(20, 23, 29, .95), rgba(10, 11, 15, .95)); border: 1px solid var(--frame); }
.snap-h { display: flex; justify-content: space-between; margin: 0; padding: 0.75rem 1rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .16em; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.snap-h span { color: var(--au); }
.snap-top { position: relative; isolation: isolate; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.875rem; align-items: center; padding: 1rem; overflow: hidden; }
.snap-top > .bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.snap-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 15, .85), rgba(10, 11, 15, .5)); }
.snap-top .av { width: 5rem; height: 5rem; object-fit: cover; border: 2px solid var(--au); }
.snap-top b { display: block; font: 900 max(11px, 1.5rem) / 1.1 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snap-top small { display: block; margin-top: 0.25rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .12em; color: #c3c9d0; }
.snap-top small.is-live { color: #7cf29b; }
.snap-lv { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .1em; }
.snap-lv img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.snap-lv em { font-style: normal; color: var(--au-2); }
.snap-ranks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .06); border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.snap-ranks button { display: grid; justify-items: center; gap: 0.125rem; padding: 0.625rem 0.25rem; background: #0e1015; transition: background .2s; }
.snap-ranks button:hover { background: #161a21; }
.snap-ranks button.is-on { background: linear-gradient(180deg, rgba(242, 193, 78, .14), #0e1015); }
.snap-ranks img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.snap-ranks b { font: 900 max(11px, 1.125rem) var(--head); }
.snap-ranks span { font: 700 max(9px, 0.5625rem) var(--head); letter-spacing: .1em; color: var(--muted); }
.snap-ranks .is-on b { color: var(--au); }
.snap-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 1rem; }
.snap-nums div { padding: 0.5rem 0.625rem; background: rgba(5, 6, 8, .5); border-left: 2px solid var(--au); }
.snap-nums span { display: block; font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.snap-nums b { display: block; font: 900 max(11px, 1.25rem) / 1.1 var(--head); font-variant-numeric: tabular-nums; }
.snap-go { display: flex; justify-content: space-between; align-items: center; margin: 0 1rem 1rem; padding: 0.75rem 1rem; font: 700 max(11px, 0.875rem) var(--head); letter-spacing: .14em; color: #000; background: var(--au); transition: background .2s, transform .2s var(--snap); }
.snap-go:hover { background: var(--au-2); transform: translateX(0.25rem); }

@media (max-width: 1280px) {
	.bd-row { grid-template-columns: 3rem 2.5rem minmax(0, 1fr) 4rem 8rem repeat(2, 6.5rem); }
	.bd-row .c3 { display: none; }
	.bd-main { grid-template-columns: minmax(0, 1fr) 21rem; }
}
@media (max-width: 1080px) {
	.stage { padding-top: calc(6rem + var(--pm, 0rem)); }
	.boards { width: 100%; overflow-x: auto; scrollbar-width: none; }
	.bd { flex: 1 0 7rem; width: auto; }
	.ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ladder div:nth-child(3)::before { display: none; }
	.bd-main { grid-template-columns: 1fr; }
	.snap { position: static; }
}
@media (max-width: 640px) {
	.st-title h1 { font-size: max(11px, 3rem); }
	.boards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; overflow: visible; }
	.bd { width: auto; padding: 0.5rem 0.125rem; align-content: start; }
	.bd img { width: 1.875rem; height: 1.875rem; }
	.bd span { font-size: 9px; letter-spacing: 0; white-space: normal; text-align: center; line-height: 1.15; }
	.podium { gap: 0.375rem; margin-top: 2rem; }
	.pl-pic, .plinth.p1 .pl-pic { width: 4rem; height: 4rem; }
	.pl-pic img.rk { width: 2rem; height: 2rem; right: -0.75rem; bottom: -0.5rem; }
	.pl-name { font-size: max(11px, 1rem); }
	.pl-sub { display: none; }
	.plinth.p1 { --h: 9.5rem; } .plinth.p2 { --h: 7.75rem; } .plinth.p3 { --h: 6.75rem; }
	.pl-n { font-size: max(11px, 2rem); }
	.pl-v { font-size: max(11px, 1.125rem); }
	.plinth.p1 .trophy { top: -2.25rem; width: 2rem; height: 2rem; }
	.ladder div { padding: 0.75rem 0.5rem; }
	.ladder dd { font-size: max(11px, 1.25rem); }
	.chip-me { margin-left: 0; }
	.bd-row { grid-template-columns: 2rem 2.25rem minmax(0, 1fr) 5.5rem; gap: 0.5rem; padding-right: 0.625rem; }
	.bd-row .lv, .bd-row .c2, .bd-row .c3, .bd-row .c1 { display: none; }
	.snap-top { grid-template-columns: 4rem minmax(0, 1fr); }
	.snap-top .av { width: 4rem; height: 4rem; }
}