/* Leaderboard page styles */

.leaderboard-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding: 0 0 55px;
	box-sizing: border-box;
	margin-top: -4px;
}

.card-95 {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	border-radius: var(--radius-lg);
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	padding: var(--space-md);
}
.card-95.lb-card-list { padding-bottom: 0; }
.card-95.header-strong {
	background: var(--bg-tertiary);
	border-color: var(--border);
}
.leaderboard-card .filters-host,
.leaderboard-card .list-host { width: 100%; }

/* League border colors for selfbar */
.lb-selfbar .inner.bg-bronze { 
	background: var(--bg-secondary); 
	border: 2px solid #CD7F32;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(205, 127, 50, 0.3);
}
.lb-selfbar .inner.bg-silver { 
	background: var(--bg-secondary); 
	border: 2px solid #C0C0C0;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(192, 192, 192, 0.3);
}
.lb-selfbar .inner.bg-gold { 
	background: var(--bg-secondary); 
	border: 2px solid #FFD700;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255, 215, 0, 0.3);
}
.lb-selfbar .inner.bg-platinum { 
	background: var(--bg-secondary); 
	border: 2px solid #7DD3FC;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(125, 211, 252, 0.3);
}
.lb-selfbar .inner.bg-diamond { 
	background: var(--bg-secondary); 
	border: 2px solid #A78BFA;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(167, 139, 250, 0.3);
}
.lb-selfbar .inner.bg-legendary { 
	background: 
		linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
		linear-gradient(90deg, #ff6ec4 0%, #7873f5 20%, #1fd1f9 40%, #ffef78 60%, #43e97b 80%, #38f9d7 100%) border-box;
	border: 2px solid transparent;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.lb-tabs {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}
.lb-tabs .tab {
	flex: 1;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text-secondary);
	font-weight: 600;
	font-size: var(--font-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}
.lb-tabs .tab:hover {
	border-color: var(--border-light);
	color: var(--text);
}
.lb-tabs .tab.active {
	background: var(--bg-tertiary);
	border-color: var(--text);
	color: var(--text);
}

.lb-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}
.lb-filter-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--space-sm);
}
.lb-filter-row .chip {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-full);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text-secondary);
	font-weight: 500;
	font-size: var(--font-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}
.lb-filter-row .chip:hover {
	border-color: var(--border-light);
	color: var(--text);
}
.lb-filter-row .chip.active {
	background: var(--bg-tertiary);
	border-color: var(--text-secondary);
	color: var(--text);
}

.lb-top3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	margin: var(--space-sm) 0 var(--space-xs);
	width: 100%;
}
.top-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	width: 100%;
	box-sizing: border-box;
	transition: all var(--transition-fast);
}
.top-card:hover {
	border-color: var(--border-light);
	background: var(--bg-tertiary);
}
.top-card .rank-badge {
	position: absolute;
	top: -8px;
	left: -8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--medal, var(--gold));
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: var(--font-sm);
	border: 2px solid rgba(0,0,0,0.3);
	z-index: 10;
}
.top-card .avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-tertiary);
	border: 2px solid var(--border);
}

/* Avatar tier borders for top cards */
.top-card .avatar.bg-bronze { border: 2px solid #CD7F32; box-shadow: 0 0 8px rgba(205, 127, 50, 0.4); }
.top-card .avatar.bg-silver { border: 2px solid #C0C0C0; box-shadow: 0 0 8px rgba(192, 192, 192, 0.4); }
.top-card .avatar.bg-gold { border: 2px solid #FFD700; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
.top-card .avatar.bg-platinum { border: 2px solid #7DD3FC; box-shadow: 0 0 8px rgba(125, 211, 252, 0.4); }
.top-card .avatar.bg-diamond { border: 2px solid #A78BFA; box-shadow: 0 0 8px rgba(167, 139, 250, 0.4); }
.top-card .avatar.bg-legendary { border: 2px solid transparent; background: linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box, linear-gradient(90deg, #ff6ec4, #7873f5, #1fd1f9, #ffef78, #43e97b, #38f9d7) border-box; box-shadow: 0 0 12px rgba(120, 115, 245, 0.5); }
.top-card .meta { flex: 1; min-width: 0; }
.top-card .name { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-card .sub { color: var(--text-secondary); font-size: var(--font-xs); }
.top-card .value { font-weight: 800; color: var(--medal, var(--text)); }
.top-card.me { outline: 2px solid var(--text-secondary); }

/* Top 3 card backgrounds with subtle medal glow */
.top-card.rank-1 { background: linear-gradient(135deg, var(--bg) 0%, rgba(255, 215, 0, 0.08) 100%); border-color: rgba(255, 215, 0, 0.3); }
.top-card.rank-2 { background: linear-gradient(135deg, var(--bg) 0%, rgba(192, 192, 192, 0.08) 100%); border-color: rgba(192, 192, 192, 0.3); }
.top-card.rank-3 { background: linear-gradient(135deg, var(--bg) 0%, rgba(205, 127, 50, 0.08) 100%); border-color: rgba(205, 127, 50, 0.3); }

.lb-rows {
	padding-right: 4px;
	display: block;
	width: 100%;
	padding-bottom: 0;
}
.lb-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-sm);
	border-bottom: 1px solid var(--border);
	width: 100%;
	box-sizing: border-box;
	transition: all var(--transition-fast);
}
.lb-row:hover {
	background: var(--bg);
}
.lb-row .pos { width: 28px; text-align: right; color: var(--text-secondary); font-weight: 700; margin-right: var(--space-xs); }
.lb-row .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-tertiary); border: 2px solid var(--border); }

/* Avatar tier borders for list rows */
.lb-row .avatar.bg-bronze { border: 2px solid #CD7F32; }
.lb-row .avatar.bg-silver { border: 2px solid #C0C0C0; }
.lb-row .avatar.bg-gold { border: 2px solid #FFD700; }
.lb-row .avatar.bg-platinum { border: 2px solid #7DD3FC; }
.lb-row .avatar.bg-diamond { border: 2px solid #A78BFA; }
.lb-row .avatar.bg-legendary { border: 2px solid transparent; background: linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box, linear-gradient(90deg, #ff6ec4, #7873f5, #1fd1f9, #ffef78, #43e97b, #38f9d7) border-box; }

.lb-row .meta { min-width: 0; }
.lb-row .name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.lb-row .sub { color: var(--text-secondary); font-size: var(--font-xs); }
.lb-row .spacer { flex: 1; }
.lb-row .value { font-weight: 700; color: var(--text); }
.lb-row.me { background: var(--bg); border-radius: var(--radius-md); }
.avatar-shell { background: var(--bg-tertiary); border: 1px solid var(--border); }
.top-card.placeholder .name,
.top-card.placeholder .sub,
.top-card.placeholder .value { color: var(--text-secondary); }
.top-card.placeholder { opacity: 0.8; }
.lb-row.placeholder { background: var(--bg); }
.lb-row.placeholder .name,
.lb-row.placeholder .sub,
.lb-row.placeholder .value { color: var(--text-secondary); }
.lb-row.placeholder .avatar { border: 1px solid var(--border); }

.lb-empty { color: var(--text-secondary); text-align: center; padding: var(--space-xl) var(--space-sm); }

.lb-selfbar {
	position: fixed;
	bottom: 76px;
	left: 0;
	right: 0;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	padding: 0 var(--space-md);
	box-sizing: border-box;
}
.lb-selfbar .inner {
	pointer-events: auto;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	position: relative;
	overflow: visible;
}
.lb-selfbar .left { display: flex; align-items: center; gap: var(--space-sm); }
.lb-selfbar .pos { width: 28px; text-align: center; font-weight: 700; color: var(--text); }
.lb-selfbar .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-tertiary); border: 1px solid var(--border); }
.lb-selfbar .meta { min-width: 0; }
.lb-selfbar .name { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36vw; }
.lb-selfbar .sub { color: var(--text-secondary); font-size: var(--font-xs); }
.lb-selfbar .value { font-weight: 800; color: var(--text); }