/**
 * Fezo Games — Shortcode styles
 *
 * BEM. Dark mode default. Mobile-responsive (stacked rows pod 480px).
 * Depends on `fezo-tokens.css` for CSS vars.
 */

/* ─── Common bits ───────────────────────────────────────────────────────── */

.fezo-shortcode-error,
.fezo-shortcode-info {
	padding: var(--fezo-space-md);
	border-radius: var(--fezo-radius-md);
	background: var(--fezo-bg-1);
	border: 1px solid var(--fezo-border);
	color: var(--fezo-text);
	font-family: var(--fezo-font-body);
}
.fezo-shortcode-error { border-color: var(--fezo-error); }
.fezo-shortcode-info  { border-color: var(--fezo-cyan-dim); }

.fezo-avatar {
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	vertical-align: middle;
}
.fezo-avatar--placeholder { box-shadow: 0 0 0 2px var(--fezo-border); }

/* ─── Leaderboard ───────────────────────────────────────────────────────── */

.fezo-leaderboard {
	background: var(--fezo-bg-1);
	border: 1px solid var(--fezo-border);
	border-radius: var(--fezo-radius-lg);
	padding: var(--fezo-space-md);
	color: var(--fezo-text);
	font-family: var(--fezo-font-body);
}

.fezo-leaderboard__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--fezo-space-md);
	padding-bottom: var(--fezo-space-sm);
	border-bottom: 1px solid var(--fezo-border);
}
.fezo-leaderboard__title {
	font-family: var(--fezo-font-display);
	font-size: 1.25rem;
	color: var(--fezo-cyan);
	text-shadow: var(--fezo-glow-cyan);
	margin: 0;
	letter-spacing: 0.04em;
}
.fezo-leaderboard__period {
	font-size: 0.85rem;
	color: var(--fezo-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fezo-leaderboard__table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}
.fezo-leaderboard__table td {
	padding: var(--fezo-space-sm) var(--fezo-space-xs);
	border-bottom: 1px solid var(--fezo-border);
	color: var(--fezo-text);
}
.fezo-leaderboard__row:last-child td { border-bottom: none; }

.fezo-leaderboard__rank {
	font-family: var(--fezo-font-mono);
	color: var(--fezo-text-muted);
	width: 50px;
	font-weight: 600;
}
.fezo-leaderboard__avatar { width: 48px; }
.fezo-leaderboard__avatar .fezo-avatar { width: 40px; height: 40px; }
.fezo-leaderboard__name { font-weight: 500; }
.fezo-leaderboard__score {
	text-align: right;
	font-weight: 700;
	color: var(--fezo-cyan);
}

.fezo-leaderboard__row--top-1 .fezo-leaderboard__rank { color: var(--fezo-yellow); }
.fezo-leaderboard__row--top-2 .fezo-leaderboard__rank { color: #d4d4d4; }
.fezo-leaderboard__row--top-3 .fezo-leaderboard__rank { color: #cd7f32; }

.fezo-leaderboard__row--current-user {
	background: rgba(255, 43, 214, 0.08);
	box-shadow: inset 4px 0 0 var(--fezo-magenta);
}
.fezo-leaderboard__row--current-user .fezo-leaderboard__name { color: var(--fezo-magenta); }

.fezo-leaderboard__empty {
	text-align: center;
	color: var(--fezo-text-muted);
	padding: var(--fezo-space-xl) var(--fezo-space-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fezo-space-sm);
}
.fezo-leaderboard__empty-icon {
	width: 64px;
	height: 64px;
	color: var(--fezo-cyan);
	opacity: 0.55;
	margin-bottom: var(--fezo-space-xs);
}
.fezo-leaderboard__empty-title {
	font-family: var(--fezo-font-display);
	color: var(--fezo-cyan);
	font-size: 1.1rem;
	margin: 0;
	letter-spacing: 0.04em;
}
.fezo-leaderboard__empty-text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--fezo-text-muted);
}
.fezo-leaderboard__empty-cta {
	display: inline-block;
	margin-top: var(--fezo-space-sm);
	padding: var(--fezo-space-sm) var(--fezo-space-lg);
	background: var(--fezo-magenta);
	color: var(--fezo-text-on-magenta);
	border-radius: var(--fezo-radius-pill);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: var(--fezo-glow-magenta);
	transition: transform var(--fezo-duration) var(--fezo-ease), box-shadow var(--fezo-duration) var(--fezo-ease);
}
.fezo-leaderboard__empty-cta:hover,
.fezo-leaderboard__empty-cta:focus {
	transform: translateY(-2px);
	box-shadow: 0 0 18px rgba(255, 43, 214, 0.7);
	color: var(--fezo-text-on-magenta);
}

/* ─── My Stats ──────────────────────────────────────────────────────────── */

.fezo-my-stats {
	background: var(--fezo-bg-1);
	border: 1px solid var(--fezo-border);
	border-radius: var(--fezo-radius-lg);
	padding: var(--fezo-space-md);
	color: var(--fezo-text);
	font-family: var(--fezo-font-body);
}

.fezo-my-stats__game {
	font-family: var(--fezo-font-display);
	color: var(--fezo-cyan);
	font-size: 1.1rem;
	margin-bottom: var(--fezo-space-md);
	padding-bottom: var(--fezo-space-sm);
	border-bottom: 1px solid var(--fezo-border);
}

.fezo-my-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: var(--fezo-space-md);
}

.fezo-my-stats__cell {
	text-align: center;
	padding: var(--fezo-space-sm);
	background: var(--fezo-bg-2);
	border-radius: var(--fezo-radius-md);
}
.fezo-my-stats__label {
	font-size: 0.75rem;
	color: var(--fezo-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--fezo-space-xs);
}
.fezo-my-stats__value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--fezo-cyan);
}

/* ─── Profile Card ──────────────────────────────────────────────────────── */

.fezo-profile-card {
	display: flex;
	gap: var(--fezo-space-md);
	align-items: flex-start;
	background: var(--fezo-bg-1);
	border: 1px solid var(--fezo-border);
	border-radius: var(--fezo-radius-lg);
	padding: var(--fezo-space-md);
	color: var(--fezo-text);
	font-family: var(--fezo-font-body);
}

.fezo-profile-card__avatar .fezo-avatar { width: 96px; height: 96px; }

.fezo-profile-card__body {
	flex: 1;
	min-width: 0;
}

.fezo-profile-card__name {
	font-family: var(--fezo-font-display);
	font-size: 1.4rem;
	color: var(--fezo-cyan);
	text-shadow: var(--fezo-glow-cyan);
	margin-bottom: var(--fezo-space-xs);
	display: flex;
	gap: var(--fezo-space-sm);
	align-items: baseline;
	flex-wrap: wrap;
}
.fezo-profile-card__country {
	font-family: var(--fezo-font-mono);
	font-size: 0.7rem;
	background: var(--fezo-bg-3);
	padding: 2px 6px;
	border-radius: var(--fezo-radius-sm);
	color: var(--fezo-text-muted);
	text-transform: uppercase;
}

.fezo-profile-card__meta {
	display: flex;
	gap: var(--fezo-space-md);
	font-size: 0.85rem;
	color: var(--fezo-text-muted);
	margin-bottom: var(--fezo-space-sm);
}

.fezo-profile-card__bio {
	font-size: 0.9rem;
	color: var(--fezo-text);
	margin-bottom: var(--fezo-space-sm);
	line-height: 1.4;
}

.fezo-profile-card__scores {
	display: flex;
	flex-direction: column;
	gap: var(--fezo-space-xs);
	margin-top: var(--fezo-space-sm);
	padding-top: var(--fezo-space-sm);
	border-top: 1px solid var(--fezo-border);
}
.fezo-profile-card__score-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: var(--fezo-space-md);
	align-items: baseline;
	font-size: 0.9rem;
}
.fezo-profile-card__score-label  { color: var(--fezo-text); }
.fezo-profile-card__score-value  { color: var(--fezo-cyan); font-weight: 600; }
.fezo-profile-card__score-rank   { color: var(--fezo-text-muted); font-size: 0.85rem; }

/* ─── Mobile responsive ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.fezo-leaderboard__table,
	.fezo-leaderboard__table tbody,
	.fezo-leaderboard__table tr,
	.fezo-leaderboard__table td {
		display: block;
		width: 100%;
	}
	.fezo-leaderboard__row {
		display: grid !important;
		grid-template-columns: 36px 40px 1fr auto;
		gap: var(--fezo-space-sm);
		align-items: center;
		padding: var(--fezo-space-sm) 0;
	}
	.fezo-leaderboard__row td {
		padding: 0;
		border-bottom: none;
	}
	.fezo-leaderboard__rank   { width: auto; }
	.fezo-leaderboard__avatar { width: auto; }

	.fezo-profile-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.fezo-profile-card__name,
	.fezo-profile-card__meta { justify-content: center; }
}