/* leader.css — leaderboard page styles */

/* ════════════════════════════════════════
   PAGE LAYOUT
   ════════════════════════════════════════ */
.lb-page {
	min-height: calc(100vh - var(--hh));
	padding: 60px 0;
}

.lb-inner {
	max-width: 760px;
	margin: 0 auto;
}

.lb-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.lb-title {
	font-family: "Syne", sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3.2rem);
	letter-spacing: -0.03em;
	line-height: 1;
}

.lb-title em {
	font-style: normal;
	background: linear-gradient(135deg, var(--sea), var(--leaf));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.lb-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}


/* ════════════════════════════════════════
   TABLE
   ════════════════════════════════════════ */
.lb-table {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.lb-table-head {
	display: grid;
	grid-template-columns: 56px 1fr 90px 90px 90px;
	padding: 14px 24px;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}

.lb-th {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.lb-th--right { text-align: right; }

.lb-body {
	display: grid;
}

.lb-row {
	display: grid;
	grid-template-columns: 56px 1fr 90px 90px 90px;
	align-items: center;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	transition: background 0.15s;
	animation: fade-row 0.4s ease both;
}

.lb-row:last-child { border-bottom: none; }
.lb-row:hover      { background: var(--cream); }

@keyframes fade-row {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Top 3 row highlights */
.lb-row--rank-1 { background: rgba(240, 180, 40,  0.07); }
.lb-row--rank-2 { background: rgba(180, 180, 195, 0.06); }
.lb-row--rank-3 { background: rgba(205, 130, 70,  0.05); }

/* Rank number */
.lb-rank {
	font-family: "Syne", sans-serif;
	font-weight: 800;
	font-size: 1rem;
	color: var(--ink-muted);
}

.lb-row--rank-1 .lb-rank { color: var(--gold); }
.lb-row--rank-2 .lb-rank { color: #a0a0b0; }
.lb-row--rank-3 .lb-rank { color: #c07840; }

.lb-medal { font-size: 1.1rem; }

/* Player name */
.lb-name {
	font-family: "Syne", sans-serif;
	font-weight: 700;
	font-size: 0.96rem;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lb-name--you::after {
	content: " (you)";
	font-weight: 400;
	font-family: "DM Sans", sans-serif;
	color: var(--ink-muted);
	font-size: 0.8rem;
}

.lb-rounds {
	font-size: 0.82rem;
	color: var(--ink-muted);
	text-align: right;
}

.lb-date {
	font-size: 0.78rem;
	color: var(--ink-muted);
	text-align: right;
}

/* Score value */
.lb-score {
	font-family: "Syne", sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--sea);
	text-align: right;
}

.lb-score--gold   { color: var(--gold); }
.lb-score--silver { color: #888898; }
.lb-score--bronze { color: #c07840; }


/* ════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════ */
.lb-empty {
	padding: 64px 24px;
	text-align: center;
}

.lb-empty__icon {
	font-size: 3rem;
	margin-bottom: 12px;
}

.lb-empty__text {
	font-size: 1rem;
	color: var(--ink-soft);
	margin-bottom: 20px;
}


/* ════════════════════════════════════════
   CURRENT PLAYER BAR
   ════════════════════════════════════════ */
.your-score-bar {
	margin-top: 20px;
	padding: 16px 24px;
	background: linear-gradient(135deg, var(--sea-dim), var(--leaf-dim));
	border: 1px solid rgba(26, 127, 196, 0.18);
	border-radius: var(--r-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.your-score-bar__text {
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.your-score-bar__text strong       { color: var(--ink); }
.your-score-bar__text--score strong { color: var(--sea); }


/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 640px) {
	.lb-page { padding: 40px 0; }

	.lb-table-head,
	.lb-row { grid-template-columns: 44px 1fr 72px; }

	.lb-th--hide-sm,
	.lb-rounds,
	.lb-date { display: none; }
}

@media (max-width: 360px) {
	.lb-table-head,
	.lb-row { padding: 12px 16px; }
}