/*
 * Default styling is a bold, bordered "sticker card" look (thick outline,
 * hard offset shadow, bold uppercase heading) rather than a plain table.
 * Colors/border/shadow are exposed as CSS custom properties with normal
 * (non-!important) declarations underneath, so a site's own CSS can still
 * override any of it -- either by overriding the variables on
 * .dino-leaderboard-widget, or by targeting the classes directly.
 */
.dino-leaderboard-widget {
	--dino-lb-bg: #fdf6e3;
	--dino-lb-border-color: #1a1a1a;
	--dino-lb-border-width: 3px;
	--dino-lb-radius: 14px;
	--dino-lb-shadow-color: #1a1a1a;
	--dino-lb-shadow-offset: 6px;
	--dino-lb-text-color: #1a1a1a;
	--dino-lb-rank-1-color: #f5811f;
	--dino-lb-rank-2-color: #3b6fe0;
	--dino-lb-rank-3-color: #8a3bd6;

	max-width: 380px;
	box-sizing: border-box;
	font-family: inherit;
	background: var(--dino-lb-bg);
	color: var(--dino-lb-text-color);
	border: var(--dino-lb-border-width) solid var(--dino-lb-border-color);
	border-radius: var(--dino-lb-radius);
	box-shadow: var(--dino-lb-shadow-offset) var(--dino-lb-shadow-offset) 0 var(--dino-lb-shadow-color);
	padding: 18px 20px 20px;
}
.dino-leaderboard-widget * {
	box-sizing: border-box;
}

.dino-leaderboard-widget-title {
	margin: 0 0 12px;
	font-size: 1.3em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding-bottom: 10px;
	border-bottom: 2px dashed rgba(26, 26, 26, 0.35);
}

.dino-leaderboard-widget-status {
	font-size: 0.9em;
	opacity: 0.75;
}
.dino-leaderboard-widget-status.is-error {
	color: #c0392b;
	opacity: 1;
}

.dino-leaderboard-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dino-leaderboard-widget-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 2px dashed rgba(26, 26, 26, 0.18);
	position: relative;
}
.dino-leaderboard-widget-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dino-leaderboard-widget-rank {
	flex: 0 0 auto;
	min-width: 2.2em;
	font-weight: 800;
	font-size: 0.95em;
	opacity: 0.55;
}
.dino-leaderboard-widget-item.dino-leaderboard-widget-rank-1 .dino-leaderboard-widget-rank {
	color: var(--dino-lb-rank-1-color);
	opacity: 1;
}
.dino-leaderboard-widget-item.dino-leaderboard-widget-rank-2 .dino-leaderboard-widget-rank {
	color: var(--dino-lb-rank-2-color);
	opacity: 1;
}
.dino-leaderboard-widget-item.dino-leaderboard-widget-rank-3 .dino-leaderboard-widget-rank {
	color: var(--dino-lb-rank-3-color);
	opacity: 1;
}

.dino-leaderboard-widget-player {
	flex: 1 1 auto;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dino-leaderboard-widget-item.dino-leaderboard-widget-rank-1 .dino-leaderboard-widget-player {
	color: var(--dino-lb-rank-1-color);
}
.dino-leaderboard-widget-item.dino-leaderboard-widget-rank-2 .dino-leaderboard-widget-player {
	color: var(--dino-lb-rank-2-color);
}
.dino-leaderboard-widget-item.dino-leaderboard-widget-rank-3 .dino-leaderboard-widget-player {
	color: var(--dino-lb-rank-3-color);
}

.dino-leaderboard-widget-score {
	flex: 0 0 auto;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.dino-leaderboard-widget-disabled {
	font-size: 0.9em;
	color: #666;
	font-style: italic;
}

/*
 * Inline layout: [dinosaur_leaderboard layout="inline"]. Instead of a
 * narrow stacked card, entries flow as a full-width wrapping grid of
 * "chips" -- fills the available width and naturally wraps onto as many
 * rows as needed to fit however many entries there are (up to the top 10
 * default), rather than leaving empty space to the side of a fixed-width
 * card.
 */
.dino-leaderboard-widget.dino-leaderboard-widget--inline {
	max-width: none;
	width: 100%;
}

.dino-leaderboard-widget--inline .dino-leaderboard-widget-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.dino-leaderboard-widget--inline .dino-leaderboard-widget-item {
	flex: 1 1 180px;
	min-width: 150px;
	max-width: 260px;
	border: 2px dashed rgba(26, 26, 26, 0.18);
	border-radius: 10px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.35);
}
/* Every chip keeps its own border, unlike the card layout's list where only
   items between entries get a divider and the last one doesn't. */
.dino-leaderboard-widget--inline .dino-leaderboard-widget-item:last-child {
	border-bottom: 2px dashed rgba(26, 26, 26, 0.18);
	padding-bottom: 8px;
}

.dino-leaderboard-widget--inline .dino-leaderboard-widget-player {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dino-leaderboard-widget--inline .dino-leaderboard-widget-score {
	margin-left: auto;
}