/* MZO site: PLAYERS page ("THE ROSTER"): BO7 calling card wall + party panel hero, then a roster of player cards.
   Accent: BO7 social cyan (--pc). Markup: public/players.php, drawn by site/js/players.js. */
body.page-players { --pc: #62d5f1; --pc-2: #a9ecfb; --live: #7cf29b; }

/* ---------- LOBBY hero (runs under the top bar like HOME) ---------- */
.lobby { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--pm, 0rem)); padding: calc(5.5rem + var(--pm, 0rem)) var(--g) 2.75rem; min-height: calc(34rem + var(--pm, 0rem)); display: flex; flex-direction: column; justify-content: flex-end; }
.lb-wall { position: absolute; inset: -6rem -10rem; z-index: -2; display: flex; flex-direction: column; justify-content: center; gap: 1rem; transform: rotate(-7deg); opacity: .85; }
.lb-track { display: flex; gap: 1rem; width: max-content; animation: cc-slide 90s linear infinite; animation-direction: var(--dir, normal); }
.lb-track[style*="--r:1"] { --dir: reverse; animation-duration: 110s; }
.lb-track[style*="--r:2"] { animation-duration: 75s; }
.lb-track img { width: 27rem; height: 7.6rem; object-fit: cover; border: 1px solid rgba(255, 255, 255, .1); filter: saturate(.85); }
@keyframes cc-slide { to { transform: translateX(-50%); } }
.lobby::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
	radial-gradient(70% 70% at 78% 60%, rgba(98, 213, 241, .12), transparent 70%),
	linear-gradient(90deg, rgba(5, 6, 8, .92) 0%, rgba(5, 6, 8, .62) 38%, rgba(5, 6, 8, .2) 70%, rgba(5, 6, 8, .45) 100%),
	linear-gradient(180deg, rgba(5, 6, 8, .6) 0%, transparent 25%, transparent 62%, var(--bg, #050608) 100%); }
.lobby::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 0.25rem); }
.lb-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem); gap: 2rem 3rem; align-items: end; }
.lb-title p { display: flex; align-items: center; gap: 0.625rem; margin: 0; font: 700 max(11px, 1.125rem) var(--head); letter-spacing: .22em; color: var(--pc); }
.lb-title p img { width: 1.75rem; height: 1.75rem; }
.lb-title h1 { margin: 0.25rem 0 0; font: 900 clamp(max(11px, 3.5rem), 7vw, 7.5rem) / .9 var(--head); letter-spacing: .02em; text-shadow: 0 0 2.5rem rgba(98, 213, 241, .25); }
.lb-sub { display: block; margin-top: 0.75rem; font: 700 max(10px, 0.8125rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.lb-counts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 2.5rem; margin: 1.75rem 0 0; }
.lb-counts div { position: relative; padding-left: 0.875rem; border-left: 2px solid rgba(98, 213, 241, .55); }
.lb-counts .is-live { border-left-color: var(--live); }
.lb-counts dt { font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.lb-counts dd { margin: 0.125rem 0 0; font: 900 max(11px, 2.25rem) / 1 var(--head); font-variant-numeric: tabular-nums; }
.lb-counts .is-live dd { color: var(--live); }

/* BO7 party panel */
.party { position: relative; background: linear-gradient(180deg, rgba(14, 18, 24, .92), rgba(8, 10, 14, .92)); border: 1px solid rgba(98, 213, 241, .28); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .5); backdrop-filter: blur(6px); }
.party::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--pc), rgba(98, 213, 241, 0)); }
.party-h { display: flex; align-items: center; gap: 0.625rem; margin: 0; padding: 0.875rem 1rem 0.625rem; font: 700 max(10px, 0.8125rem) var(--head); letter-spacing: .18em; }
.party-h img { width: 1.375rem; height: 1.375rem; }
.party-n { margin-left: auto; min-width: 1.75rem; padding: 0.125rem 0.5rem; text-align: center; color: #04140a; background: var(--live); font-weight: 900; }
.party-n:empty { display: none; }
.party-list { display: grid; gap: 0.375rem; padding: 0 0.625rem 0.625rem; max-height: 21rem; overflow-y: auto; scrollbar-width: thin; }
.pm { position: relative; overflow: hidden; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; min-height: 3.75rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; background: rgba(20, 24, 31, .85); border: 1px solid #262c35; transition: border-color .2s, transform .2s var(--ease); opacity: 0; transform: translateX(1rem); }
body.is-ready .pm { animation: in .6s var(--ease) both; animation-delay: calc(var(--i) * 80ms + 450ms); }
.pm:hover, .pm:focus-visible { border-color: var(--pc); transform: translateX(-0.25rem); }
.pm.is-live { border-left: 3px solid var(--live); }
.pm.is-me .pm-who b { color: var(--gold); }
.pm-map { position: absolute; inset: 0 0 0 40%; z-index: 0; width: 60%; height: 100%; object-fit: cover; opacity: .35; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.pm > :not(.pm-map) { position: relative; z-index: 1; }
.pm-av { width: 2.75rem; height: 2.75rem; object-fit: cover; border: 1px solid #39414c; background: #0b0e13; }
.pm-who { min-width: 0; }
.pm-who b { display: block; font: 700 max(13px, 1rem) var(--head); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-who small { display: block; margin-top: 0.125rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .1em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm.is-live .pm-who small { color: var(--live); }
.pm-lv { display: flex; align-items: center; gap: 0.375rem; font: 900 max(12px, 1rem) var(--head); }
.pm-lv img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.pm-on { position: absolute !important; left: 0.25rem; top: 0.25rem; width: 0.875rem; height: 0.875rem; animation: blink 1.6s ease-in-out infinite; }
.pm-empty { margin: 0; padding: 1rem; color: var(--muted); }

/* ---------- ROSTER ---------- */
.roster { padding-top: 2rem; }
.rs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.rs-search, .rs-sort { display: flex; align-items: center; gap: 0.75rem; height: 2.75rem; padding: 0 0.875rem; background: var(--panel); border: 1px solid var(--frame); transition: border-color .2s; }
.rs-search { flex: 1 1 18rem; max-width: 28rem; }
.rs-search:focus-within, .rs-sort:focus-within { border-color: var(--pc); }
.rs-search span, .rs-sort span { font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--pc); }
.rs-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); }
.rs-sort select { height: 100%; background: none; border: 0; outline: 0; color: #fff; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .1em; cursor: pointer; }
.rs-sort option { background: #101218; }
.rs-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.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(--pc); color: #021016; background: var(--pc); }
.chip em { font-style: normal; margin-left: 0.375rem; padding: 0 0.375rem; color: #04140a; background: var(--live); }
.chip-me { margin-left: auto; border-color: rgba(239, 215, 11, .6); color: var(--gold); }
.rs-count { margin: 1rem 0 0; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.rs-group { display: flex; align-items: center; gap: 0.75rem; margin: 1.75rem 0 0.875rem; font: 700 max(12px, 1rem) var(--head); letter-spacing: .18em; }
.rs-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(98, 213, 241, .4), transparent); }
.rs-group span { padding: 0.125rem 0.5rem; font-size: .8em; color: var(--muted); border: 1px solid var(--frame); }
.rs-group.is-live { color: var(--live); }
.rs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.rs-group + .rs-cards { margin-top: 0; }
.rs-empty { margin: 1.5rem 0 0; padding: 2rem; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--frame); }

/* player card */
.pc { position: relative; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, #11141a, #0a0c10); border: 1px solid #242a33; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; opacity: 0; transform: translateY(1rem); }
body.is-ready .pc { animation: in .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 100ms); }
.pc:hover, .pc:focus-visible { border-color: var(--pc); transform: translateY(-0.25rem); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55), 0 0 0 1px rgba(98, 213, 241, .25); }
.pc.is-live { border-color: rgba(124, 242, 155, .5); }
.pc.is-me { border-color: rgba(239, 215, 11, .7); }
.pc.is-flash { animation: pc-flash 1.6s ease-out; }
@keyframes pc-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--gold), 0 0 2rem rgba(239, 215, 11, .5); } }
.pc-banner { position: relative; height: 6.5rem; overflow: hidden; background: #0b0e13; }
.pc-banner::before { content: ""; position: absolute; inset: 0; background: var(--bn) center 35% / cover no-repeat; transition: transform 1.2s var(--ease); }
.pc:hover .pc-banner::before { transform: scale(1.06); }
.pc-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 8, .35), rgba(5, 6, 8, .1) 40%, #11141a 100%); }
.pc-banner > span { position: absolute; z-index: 1; display: flex; align-items: center; gap: 0.375rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .12em; }
.pc-rank { left: 0.625rem; top: 0.5rem; padding: 0.125rem 0.5rem; background: rgba(5, 6, 8, .75); border: 1px solid rgba(255, 255, 255, .14); }
.pc-rank img { width: 1rem; height: 1rem; }
.pc.is-lead .pc-rank { color: #f2c14e; border-color: rgba(242, 193, 78, .6); }
.pc-live { right: 0.625rem; top: 0.5rem; padding: 0.125rem 0.5rem; color: #04140a; background: var(--live); }
.pc-live img { width: 0.75rem; height: 0.75rem; filter: brightness(0); }
.pc-rank em { margin-left: 0.25rem; padding-left: 0.5rem; border-left: 1px solid rgba(255, 255, 255, .2); font-style: normal; color: var(--pc-2); }
.pc-id { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; margin-top: -2.25rem; padding: 0 0.875rem; }
.pc-av { width: 4rem; height: 4rem; object-fit: cover; background: #0b0e13; border: 2px solid #39414c; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, .6); }
.pc.is-live .pc-av { border-color: var(--live); }
.pc.is-me .pc-av { border-color: var(--gold); }
.pc-name { min-width: 0; padding-bottom: 0.125rem; }
.pc-name b { display: block; font: 900 max(14px, 1.25rem) / 1.1 var(--head); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name em { display: inline-block; margin-top: 0.125rem; padding: 0 0.375rem; font: 700 max(10px, 0.625rem) var(--head); font-style: normal; letter-spacing: .14em; color: #000; background: var(--gold); }
.pc-name small { display: block; margin-top: 0.25rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .1em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc.is-live .pc-name small { color: var(--live); }
.pc-ic { width: 3rem; height: 3rem; object-fit: contain; filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, .7)); }
.pc-xp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; margin: 0.875rem 0.875rem 0; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .1em; color: var(--muted); }
.pc-xp b { color: #fff; font-size: 1.15em; }
.pc-xp i { position: relative; height: 0.3125rem; background: #1d222a; overflow: hidden; }
.pc-xp i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #2a8fb0, var(--pc)); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .4s; }
body.is-ready .pc-xp i::after { transform: scaleX(var(--p)); }
.pc-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.5fr); /* score needs room for 10,000,000+ */ margin: 0.875rem 0 0; border-top: 1px solid #1d222a; border-bottom: 1px solid #1d222a; }
.pc-stats div { padding: 0.625rem 0.25rem; text-align: center; min-width: 0; }
.pc-stats div + div { border-left: 1px solid #1d222a; }
.pc-stats dt { font: 700 max(9px, 0.625rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.pc-stats dd { margin: 0.125rem 0 0; font: 900 max(12px, 1.0625rem) var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-map { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.625rem 0.875rem; margin-top: auto; }
.pc-map img, .pc-map > i { width: 4.5rem; height: 2.5rem; object-fit: cover; background: #0b0e13; border: 1px solid #262c35; }
.pc-map span { min-width: 0; font: 700 max(9px, 0.625rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.pc-map span b { display: block; margin-top: 0.125rem; font-size: max(11px, 0.8125rem); letter-spacing: .06em; color: #dfe6ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-go { font-size: max(16px, 1.5rem) !important; color: var(--pc) !important; transition: transform .2s; }
.pc:hover .pc-go { transform: translateX(0.25rem); }

@media (prefers-reduced-motion: reduce) {
	.lb-track { animation: none; }
}
@media (max-width: 1080px) {
	.lobby { padding-top: calc(4rem + var(--pm, 0rem)); min-height: 0; }
	.lb-head { grid-template-columns: minmax(0, 1fr); }
	.lb-counts { grid-template-columns: repeat(4, minmax(0, auto)); gap: 0 1.5rem; }
}
@media (max-width: 640px) {
	.lb-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; }
	.lb-track img { width: 18rem; height: 5rem; }
	.rs-search { flex-basis: 100%; max-width: none; }
	.rs-sort { flex: 1 1 auto; }
	.chip-me { margin-left: 0; }
	.rs-cards { grid-template-columns: minmax(0, 1fr); }
}